{% load i18n %}
<div id="createvm-overlay-content" class="hidden create-vm">
    <div class="steps-history clearfix">
        <div class="steps-history-cont step1h completed step-header"
            id="vm-create-step-history-1">
            <div class="steps-history-step clearfix">
                <span class="header-step step-1 clearfix">
                    <span class="num">1<span class="subnum">/3</span></span>
                    <span class="title">
                        {% trans "Image" %}
                    </span>
                    <div class="info">
                        <span class="subtitle">
                            {% trans "Select an OS" %}
                        </span>
                        <span class="description">
                            {% trans "Choose your preferred image" %}
                        </span>
                    </div>
                </span>
            </div>
        </div>
        <div class="steps-history-cont step2h current step-header"
           id="vm-create-step-history-2" >
            <div class="steps-history-step clearfix">
                <span class="header-step step-2 clearfix">
                    <span class="num">2<span class="subnum">/3</span></span>
                    <span class="title">
                        {% trans "Flavor" %}
                    </span>
                    <div class="info">
                        <span class="subtitle">
                            {% trans "Select CPUs, RAM and Disk Size" %}
                        </span>
                        <span class="description">
                            {% trans "Available options are filtered based on the selected image" %}
                        </span>
                    </div>
                </span>
            </div>
        </div>
        <div class="steps-history-cont step3h step-header">
            <div class="steps-history-step clearfix"
                id="vm-create-step-history-3">
                <span class="header-step step-3 clearfix">
                    <span class="num">3<span class="subnum">/3</span></span>
                    <span class="title">
                        {% trans "Personalize" %}
                    </span>
                    <div class="info">
                        <span class="subtitle">
                            {% trans "Virtual machine custom options" %}
                        </span>
                        <span class="description">
                            {% trans "Virtual machine custom options" %}
                        </span>
                    </div>
                </span>
            </div>
        </div>
        <div class="steps-history-cont step4h last step-header">
            <div class="steps-history-step clearfix"
                id="vm-create-step-history-4">
                <span class="header-step step-4 clearfix">
                    <span class="num">4<span class="subnum">/3</span></span>
                    <span class="title">
                        {% trans "Confirm" %}
                    </span>
                    <div class="info">
                        <span class="subtitle">
                            {% trans "Confirm your settings" %}
                        </span>
                        <span class="description">
                            {% trans "Confirm that the options you have selected are correct" %}
                        </span>
                    </div>
                </span>
            </div>
        </div>
    </div>
    <div class="steps-container clearfix">
        <div class="step-1 select-image wide create-step-cont clearfix">
            <div class="clearfix step-header">
            </div>
            <div class="step-cont clearfix">
                <div class="images-filter-cont content-cont">
                    <div class="images-filters">
                        <div class="image-types-cont">
                            <h4>Image type</h4>
                            <ul class="type-filter">
                            </ul>
                        </div>
                        <div class="categories-filters-cont">
                            <h4 class="image-filters-title">Categories </h4>
                            <ul class="category-filters clearfix"></ul>
                            <span class="clear">{% trans "clear categories" %}</span>
                            <span class="empty">{% trans "no categories available" %}</span>
                        </div>
                    </div>
                </div>
                <div class="images-list-cont content-cont">
                    <h4>{% trans "Available images" %}
                        <span class="loading-indicator"></span>
                        <span class="custom-action">
                        <a href="#" class="register-custom-image">{% trans "create image" %}</a>
                        </span>
                    </h4>
                    <ul class="images-list">
                    </ul>
                    <span class="empty">
                      {% trans "No images available" %}.
                    </span>
                    {% if custom_image_help_url %}
                    <span class="custom-image-help" style="display:none">
                      <br /><br />
                      {% blocktrans with custom_image_help_url as url %}
                      Consult <a href="{{ url }}">this guide</a> if you want to create a custom OS image
                      {% endblocktrans %}
                    </span>
                    {% endif %}
                    <span class="loading hidden">{% trans "loading..." %}</span>
                </div>
                <div class="images-info-cont content-cont">
                    <h4>Image title</h4>
                    <span class="hide">close details</span>
                    <div class="image-detail description clearfix">
                        <span class="title">{% trans "Description" %}</span>
                        <p></p>
                    </div>
                    <h3>Image metadata</h3>
                    <div class="extra-details clearfix">
                    </div>

                </div>
            </div>
        </div>
        <div class="step-2 select-flavor create-step-cont clearfix">
            <div class="clearfix step-header">
            </div>
            <div class="step-cont clearfix">
                <div class="flavors-predefined-cont content-cont"> 
                    <div class="flavors-predefined">
                        <h4>{% trans "Predefined" %}</h4>
                        <ul class="predefined-list">
                        </ul>
                    </div>
                </div>
                <div class="flavor-options-cont content-cont">
                    <div class="flavor-options-inner-cont clearfix"
                        id="create-vm-flavor-options">
                        <div class="flavor-options cpu clearfix">
                          <h4 class="clearfix"><span class="title">{% trans "CPUs" %}</span>
                            <span class="available"></span>
                                <span class="desc">{% trans "Choose number of CPU cores" %}</span>
                            </h4>
                            <ul class="flavors-cpu-list flavor-opts-list clearfix">
                            </ul>
                        </div>
                        <div class="flavor-options mem clearfix">
                            <h4 class="clearfix"><span class="title">{% trans "Memory size" %}</span>
                            <span class="available"></span>
                                <span class="desc">{% trans "Choose memory size" %}</span>
                            </h4>
                            <ul class="flavors-mem-list flavor-opts-list clearfix">
                            </ul>
                        </div>
                        <div class="flavor-options disk clearfix">
                            <h4 class="clearfix"><span class="title">{% trans "Disk size" %}</span>
                            <span class="available"></span>
                                <span class="desc">{% trans "Choose disk size" %}</span>
                            </h4>
                            <ul class="flavors-disk-list flavor-opts-list clearfix">
                            </ul>
                        </div>
                        <div class="flavor-options disk_template clearfix">
                            <h4 class="clearfix"><span class="title">{% trans "Storage" %}</span>
                                <span class="desc">{% trans "Select storage type" %}</span>
                            </h4>
                            <ul class="flavors-disk-template-list flavor-opts-list clearfix">
                            </ul>
                            <div class="disk-template-description">
                                <p></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="step-3 vm-personalize create-step-cont clearfix">
            <div class="clearfix step-header">
            </div>
            <div class="step-cont clearfix">
                <div class="rename">
                    <div class="form-field">
                        <h4>
                            <label for="create-vm-name">{% trans "Machine name" %}</label>
                        </h4>
                        <input type="text" name="create-vm-name"
                        class="rename-field" id="create-vm-name" />
                    </div>
                    
                    <div class="personalize-conts clearfix">
                        <div class="list-cont personalize-cont ssh">
                            <h4>{% trans "Public SSH keys" %} <span><a
                                        class="create-ssh-key" href="#">manage keys</a></span></h4>
                            <p class="desc">
                            {% blocktrans %}
                            Your account contains the following SSH public keys. 
                            Select one or more to activate in your new machine. 
                            You will then be able to ssh with the corresponding 
                            private key without a password."
                            {% endblocktrans %}
                            </p>
                            <p class="desc empty hidden">
                            No ssh keys in your account. <a href="#"
                                class="create-ssh-key">Create/import a new key now</a>.
                            </p>
                            <p class="desc warning disabled hidden">
                                The image you selected does not support ssh key
                                assignments.
                            </p>
                            <ul class="confirm-params">
                            </ul>
                        </div>
                        <div class="list-cont personalize-cont meta">
                            <h4>{% trans "Suggested tags" %}</h4>
                            <ul class="confirm-params">
                                <li class="predefined-meta role">
                                    <p class="desc">
                                        You may change machine tags
                                        later from the machines view.
                                    </p>
                                    <span class="key">{% trans "Role" %}</span>
                                    <div class="values clearfix">
                                    </div>
                                </li>
                                <!--<li class="predefined-meta clearfix">-->
                                    <!--<span class="key">{% trans "Public key" %}</span>-->
                                    <!--<input type="file"/>-->
                                    <!--<textarea height="20"></textarea>-->
                                <!--</li>-->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
    </div>
        <div class="step-4 vm-confirm create-step-cont clearfix">
            <div class="clearfix step-header">
            </div>
            <div class="step-cont clearfix">
                <div class="rename">
                    <div class="form-field">
                        <h4>Machine name</h4>
                        <h3 class="vm-name">
                        </h3>
                    </div>
                    
                    <div class="confirm-conts clearfix">
                        <div class="list-cont confirm-cont image">
                            <h4>{% trans "Image" %}</h4>
                            <ul class="confirm-params">
                                <li class="param image-name clearfix">
                                    <h4 class="value"></h4>
                                </li>
                                <li class="param image-description clearfix">
                                    <span class="title">{% trans "Description" %}</span>
                                    <span class="value"></span>
                                </li>
                                <li class="param image-os clearfix">
                                    <span class="title">{% trans "OS" %}</span>
                                    <span class="value"></span>
                                </li>
                                <li class="param image-size clearfix">
                                    <span class="title">{% trans "Size" %}</span>
                                    <span class="value"></span>
                                </li>
                                <li class="param image-gui clearfix">
                                    <span class="title">{% trans "GUI" %}</span>
                                    <span class="value"></span>
                                </li>
                                <li class="param image-kernel clearfix">
                                    <span class="title">{% trans "Kernel" %}</span>
                                    <span class="value"></span>
                                </li>
                            </ul>
                        </div>
                        <div class="list-cont confirm-cont flavor">
                            <h4>{% trans "Flavor" %}</h4>
                            <ul class="confirm-params">
                                <li class="param flavor-cpu clearfix">
                                    <span class="title">{% trans "CPUs" %}</span>
                                    <span class="value"></span>
                                </li>
                                <li class="param flavor-ram clearfix">
                                    <span class="title">{% trans "Memory" %}</span>
                                    <span class="value"></span>
                                </li>
                                <li class="param flavor-disk clearfix">
                                    <span class="title">{% trans "Disk" %}</span>
                                    <span class="value"></span>
                                </li>
                                <li class="param flavor-disktype clearfix">
                                    <span class="title">{% trans "Storage type" %}</span>
                                    <span class="value"></span>
                                </li>
                            </ul>
                        </div>
                        <div class="list-cont confirm-cont meta">
                            <h4>{% trans "Machine Tags" %}</h4>
                            <ul class="confirm-params meta">
                            </ul>
                            <h4>{% trans "SSH Keys" %}</h4>
                            <ul class="confirm-params ssh">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>

<div class="image-warning clearfix">
  <p>
  {% blocktrans %}You have selected a user-provided Image, which is not
  officially endorsed by {{ BRANDING_SERVICE_NAME }}. Please make sure it is from a
  trustworthy source.{% endblocktrans %}
  </p>
  <span class="untrusted-image-confirm confirm">confirm</span>
</div>
<div class="create-controls clearfix">
    <div class="form-action cancel">{% trans "cancel" %}</div>
    <div class="form-action next">{% trans "next" %}</div>
    <div class="form-action prev">{% trans "previous" %}</div>
    <div class="form-action create submit">{% trans "create machine" %}</div>
</div>
</div>

<div id="creation-password-overlay" class="overlay-content overlay-info hidden">
    <div class="description">
        <p>{% blocktrans %}Your new machine is now buidling... (this might take a few minutes){% endblocktrans %}</p>
    </div>
    <div class="password-cont clearfix">
        <div class="password-label">{% blocktrans %}Write down your password now:{% endblocktrans %}</div>
        <div class="password" id="new-machine-password">password</div>
        <div class="clipboard new-vm-password-copy"></div>
    </div>
    <div class="description subinfo">
        <p>{% blocktrans %}You will need this later to connect to your machine.{% endblocktrans %}</p>
        <p class="important">{% blocktrans %}After closing this window you will <em>NOT</em> be able to retrieve it again
        {% endblocktrans %}</p>
    </div>
    <div class="form-action show-machine">{% trans "OK" %}</div>
</div>