{% extends "base.html" %}

{% block body %}
<form action="{% url synnefo.admin.views.images_modify image.id %}" method="post">
  <div class="row">
    <div class="span7 columns">

      <div class="clearfix">
        <label for="image-id">ID</label>
        <div class="input">
          <span class="uneditable-input" id="image-id">{{ image.id }}</span>
        </div>
      </div>

      <div class="clearfix">
        <label for="image-name">Name</label>
        <div class="input">
          <input class="medium" id="image-name" name="name" value="{{ image.name }}" type="text" />
        </div>
      </div>

      <div class="clearfix">
        <label for="image-state">State</label>
        <div class="input">
          <select class="medium" id="image-state" name="state">
            {% for state in states %}
            <option{% ifequal state image.state %} selected{% endifequal %}>{{ state }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div class="clearfix">
        <label for="image-owner">Owner ID</label>
        <div class="input input-append">
          <input class="small" id="image-owner" name="owner" value="{{ image.userid }}" type="text" />
          <label class="add-on"><a href=""></a></label>
        </div>
      </div>

      <div class="clearfix">
        <label for="image-sourcevm">Virtual Machine ID</label>
        <div class="input input-append">
          <input class="small append-server" id="image-sourcevm" name="sourcevm" value="{{ image.sourcevm.id }}" type="text" />
          <label class="add-on"><a href=""></a></label>
        </div>
      </div>

      <div class="clearfix">
        <label for="image-backend">Backend ID</label>
        <div class="input">
          <input class="large" id="image-backend" name="backend" value="{{ image.backend_id }}" type="text" />
        </div>
      </div>

      <div class="clearfix">
        <label for="image-format">Format</label>
        <div class="input">
          <select class="medium" id="image-format" name="format">
            {% for format in formats %}
            <option{% ifequal format image.format %} selected{% endifequal %}>{{ format }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div class="clearfix">
        <label for="image-public">Public</label>
        <div class="input">
          <ul class="inputs-list">
            <li>
              <label>
                <input type="checkbox" id="image-public" name="public"{% if image.public %} checked{% endif %}>
              </label>
            </li>
          </ul>
        </div>
      </div>

      <div class="clearfix">
        <label for="image-created">Created</label>
        <div class="input">
          <span class="uneditable-input" id="image-created">{{ image.created }}</span>
        </div>
      </div>

      <div class="clearfix">
        <label for="image-updated">Updated</label>
        <div class="input">
          <span class="uneditable-input" id="image-updated">{{ image.updated }}</span>
        </div>
      </div>
    </div>

    <div class="span7 columns offset1">
      <table>
        <thead>
          <tr>
            <th>Key</th>
            <th>Value</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr class="row-template">
            <td><input class="medium" type="text" name="key"></td>
            <td><input class="medium" type="text" name="value"></td>
            <td><a class="btn danger delete-row"><strong>-</strong></a></td>
          </tr>
          {% for meta in metadata %}
          <tr>
            <td><input type="text" class="medium" name="key" value="{{ meta.meta_key }}"></td>
            <td><input type="text" class="medium" name="value" value="{{ meta.meta_value }}"></td>
            <td><a class="btn danger delete-row"><strong>-</strong></a></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      <a class="btn success add-row"><strong>+</strong></a>
    </div>
  </div>

  <div class="actions">
    <button type="submit" class="btn primary">Save Changes</button>
    <button type="reset" class="btn">Reset</button>
  </div>
</form>
{% endblock body %}