{% load i18n %}
<!-- the create button -->
<div class="pane-top">
<div id="networks-createcontainer" class="create-container">
    <a class="createbutton" id="networkscreate" rel="#networks-wizard"
        href="#">{% trans "New Network +" %}</a>
</div>
</div>

<!-- vm select -->
<div id="network-vms-select-content" class="overlay-content hidden">
    <div class="description">
        <p>{% trans "Select machines to add" %}</p>
    </div>
    <div class="clearfix vms-list">
        <ul class="options-list three">
        </ul>
        <div class="empty-message">{% trans "No available machines to connect" %}</div>
    </div>
    <div class="form-actions clearfix">
        <span class="form-action create">{% trans "connect machines" %}</span>
    </div>
</div>

<!-- add new network overlay -->
<div id="networks-create-content" class="overlay-content hidden">
    <div class="create-form">
        <p class="info"></p>
        <form>
          <div class="col-fields bordered clearfix">
            <div class="form-field">
                <label for="network-create-name">Network name:</label>
                <input type="text" class="network-create-name" name="network-create-name" id="network-create-name" />
            </div>
            <div class="form-field right-field">
                <label for="network-create-type">Network type:</label>
              <select id="network-create-type">
              </select>
            </div>
          </div>
          <div class="col-fields clearfix bordered">
            <div class="form-field fixpos">
                <label for="network-create-dhcp">Assign IP addresses automatically:</label>
                <input type="checkbox" class="use-dhcp" name="network-create-dhcp"
                  id="network-create-dhcp" checked />
                  <p class="description noborder fields-desc">
                  {% blocktrans %}If you enable DHCP on the private network,
                  connected virtual machines will automatically be assigned
                  an IP address based on the given subnet. You may disable this option
                  if you want to assign IP addresses to the connected
                  virtual machines manually. {% endblocktrans %}
            </p>
            </div>
            <div id="network-create-dhcp-fields">
              <div class="form-field fixpos">
                <label for="network-type">Network subnet:</label>
                <select id="network-create-subnet">
                  <option selected class="auto" value="auto">Auto</option>
                  <option value="custom" class="manual">Manual...</option>
                </select>
              </div>
              <div class="form-field">
                <label class="hidden" for="network-custom-subnet">Custom subnet:</label>
                <input type="text" id="network-create-subnet-custom"/>
              </div>
            </div>
          </div>
            <div class="form-actions plain clearfix">
                <span class="form-action create">{% trans "create network" %}</span>
            </div>
        </form>
    </div>
    
    <div class="ajax-submit"></div>
</div>

<!-- networks list -->
<div id="networks-container" class="clearfix">
    <!-- spinner while loading list -->
    
    <div class="templates hidden">
    <!-- public network template -->
    <div class="network" id="public-template">
        <img class="network-logos" src="{{ SYNNEFO_IMAGES_URL }}internet.png" />
        <div href="#" class="name-div">
            <h5 class="namecontainer">
                <span class="name">{% trans "Internet" %}</span>
            </h5>
        </div>
        <div class="network-machines">
            <div class="cont-toggler list-toggle">
                <span class="label machines-label">{% trans "machines" %}
                    (<span class="machines-count">0</span>)
                </span>
            </div>
        </div>
        <div class="network-contents">
            <div class="network-placeholder">
                <div class="machines-list">
                <!-- append machines here -->
                </div>
                <!-- Adding servers to public network is not supported in 0.5
                <div class="empty-network-slot" id="machine-template">
                    <div class='network-add-machine'>
                        <span class="add-icon">+</span>
                    </div>
                </div>
                -->
            </div>
        </div>
        <div class="state">
            <div class="net-status status">{% trans "Public Network" %}</div>
            <div class="indicators network-indicator">
                <div class="indicator1"></div>
                <div class="indicator2"></div>
                <div class="indicator3"></div>
                <div class="indicator4"></div>
            </div>
        </div>
        <div class="actions vm-actions">
             <!-- Adding servers to public network is not supported in 0.5
            <a href="#" class="action-add">{% trans "Add Machine" %}</a>
            -->
        </div>
        <div class="confirm_single">
            <button class="yes">{% trans "Confirm" %}</button>
            <button class="no">{% trans "Cancel" %}</button>
        </div>
        <div class="action_error" align="center">
            {% trans "<span>Error</span> on" %} <span class="action">{% trans "error action" %}</span>
            <span class="code"></span>
            <span class="message"></span>
            <button class="details">{% trans "Details" %}</button>
        </div>
    </div>

    <!-- template for machines in public network -->
    <div class="network-machine" id="public-nic-template">
        <div class="machine-actions vm-actions">
            <a href="#" class="action-details">{% trans "Details" %}</a>
        </div>
        <div class="confirm_single">
            <button class="yes">{% trans "Confirm" %}</button>
            <button class="no">{% trans "Cancel" %}</button>
        </div>
        <div class="action_error" align="center">
            {% trans "<span>Error</span> on" %} <span class="action">{% trans "error action" %}</span>
            <span class="code"></span>
            <span class="message"></span>
            <button class="details">{% trans "Details" %}</button>
        </div>
        <div class="ips">
            <div class="ip4-container status">
                {% trans "IPv4" %}:
                <span class="ip4 ipv4-text">192.94.73.15</span>
            </div>
            <div class="ip6-container status">
                {% trans "IPv6" %}:
                <span class="ip6 ipv6-text"></span>
            </div>
        </div>
        <img class="logo" src="{{ SYNNEFO_IMAGES_URL }}icons/machines/medium/debian-on.png" />
        <div class='network-remove-machine'>
            <!-- Removing servers from public network is not supported in 0.5
            <span class="remove-icon">X</span>
            -->
            <span>&nbsp;</span>
        </div>
        <div href="#" class="machine-name-div">
            <h5 class="namecontainer">
                <span class="name vm-name">my desktop1</span>
            </h5>
        </div>
        <div class="firewall">
            <div class="toggler-wrap clearfix">
                <div class="cont-toggler firewall-toggle">
                    <span class="label machines-label">{% trans "Firewall" %}
                        (<span class="firewall-off">{% trans "Off" %}</span>)
                    </span>
                    <span class="network-progress-indicator">
                        <img src="{{ SYNNEFO_IMAGES_URL }}icons/indicators/small/progress.gif" alt="{% trans "updating firewall settings" %}" title="{% trans "updating firewall settings" %}" />
                    </span>
                </div>
            </div>
        </div>
        <div class="firewall-content clearix">
            <div class="firewall-options">
                <input type="radio" class="checkboxes" value="DISABLED" name="firewall" />
                <span class="checkbox-legends">{% trans "Unprotected mode (Firewall off)" %}</span>
                <br />
                <input type="radio" class="checkboxes" value="ENABLED" name="firewall" />
                <span class="checkbox-legends">{% trans "Fully protected mode (Firewall on)" %}</span>
                <br />
                <input type="radio" class="checkboxes" value="PROTECTED" name="firewall" />
                <span class="checkbox-legends">{% trans "Basically protected mode (Firewall on)" %}</span>
            </div>
            <button type="submit" class="firewall-apply">{% trans "Apply" %}</button>
        </div>
    </div>


    <!-- private network template -->
    <div class="network-cont" id="private-template">
        <div class="network">
            <div class="actions vm-actions machine-actions net-actions">
                    <a href="#" class="action-add">{% trans "Add Machine" %}</a>
                    <div class="action-container destroy">
                        <a href="#" class="action-destroy">{% trans "Destroy" %}</a>
                        <div class="confirm_single">
                            <button class="yes">{% trans "Confirm" %}</button>
                            <button class="no">X</button>
                        </div>
                    </div>
            </div>
            <div class="state">
                <div class="net-status status">{% trans "Private Network" %}</div>
                <div class="indicators network-indicator">
                    <div class="indicator1"></div>
                    <div class="indicator2"></div>
                    <div class="indicator3"></div>
                    <div class="indicator4"></div>
                </div>
                <img class="spinner" style="display:none" src="{{ SYNNEFO_IMAGES_URL }}icons/indicators/medium/progress.gif" />
                <img class="wave" style="display:none" src="{{ SYNNEFO_IMAGES_URL }}icons/indicators/medium/wave.gif" />
            </div>
            <img class="network-logos" src="{{ SYNNEFO_IMAGES_URL }}network.png" />
            <div href="#" class="name-div">
                <h5 class="namecontainer editable">
                    <span class="name">{% trans "My Network 1" %}</span>
                    <span class="rename-network"></span>
                    <div class="editbuttons" style="display:none">
                        <span class="save"></span>
                        <span class="cancel"></span>
                    </div>
                </h5>
              </div>
              <div class="cidr">
              </div>
            <div class="network-machines">
                <div class="cont-toggler list-toggle">
                    <span class="label machines-label">{% trans "machines" %}
                        (<span class="machines-count">0</span>)
                    </span>
                </div>
            </div>
            <div class="network-contents">
                <div class="network-placeholder">
                    <div class="machines-list">
                    <!-- append machines here -->
                    </div>
                    <div class="empty-network-slot" id="machine-template">
                        <div class='network-add-machine'><div class="add-icon">+</div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- template for machines in private network -->
    <div class="network-machine" id="private-nic-template">
        <div class="machine-actions vm-actions net-vm-actions">
            <div class="action-destroy">
                <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>
                <div class="confirm_single">
                    <button class="yes">{% trans "Confirm" %}</button>
                    <button class="no">X</button>
                </div>
            </div>
            <a href="#" class="action-details">{% trans "Details" %}</a>
        </div>
        <div class="action_error" align="center">
            {% trans "<span>Error</span> on" %} <span class="action">{% trans "error action" %}</span>
            <span class="code"></span>
            <span class="message"></span>
            <button class="details">{% trans "Details" %}</button>
        </div>
        <img class="logo" src="{{ SYNNEFO_IMAGES_URL }}icons/machines/medium/debian-on.png" />
        <div class='network-remove-machine'><span class="remove-icon">X</span></div>
        <div href="#" class="machine-name-div">
            <h5 class="namecontainer editable">
                <span class="name vm-name">my desktop1</span>
              </h5>
        </div>
        <div class="ips">
            <div class="ip4-container status">
                {% trans "IPv4" %}:
                <span class="ip4 ipv4-text">192.94.73.15</span>
            </div>
            <div class="ip6-container status">
                {% trans "IPv6" %}:
                <span class="ip6 ipv6-text"></span>
            </div>
        </div>
        <h5 class='machine-connect'>
          <span class="content">
            <span>{% trans "Connect" %}</span> {% trans "to manage private IPs" %}
          </span>
        </h5>
    </div>
    </div>
    <!-- the actual structure to be populated -->
    <div class="public-networks clearfix"></div>
    <div class="private-networks clearfix" style="display:none;"></div>
</div>