{% load static %}
{% include "header.html" %}
{% include "navigation.html" %}
{% include "logo.html" %}

<div class="container">
  <div class="dashboard">
    <div class="span8 offset2">
      <h1><a href="/software">Software</a> <span style="font-size:18px"> /
          <a href="/software/?container_family_id={{data.container.family_id}}&details=True">{{ data.container.name }}</a> /
          <a href="/software/?container_uuid={{data.container.uuid}}&details=True">{{ data.container.image_tag}}</a> / edit</span></h1>
      <hr>
      {% if data.error %}
      <div class="alert alert-danger" style="width:500px;">{{ data.error }}</div>
      {% endif %}
      {% if data.saved %}
      <div class="alert alert-success" style="width:500px;">Software container updated successfully.</div>
      {% endif %}
      {% if data.created %}
      <div class="alert alert-success" style="width:500px;">Software container created successfully.</div>
      {% endif %}
      <form action="#" method="POST">
      {% csrf_token %}
      <table class="dashboard" style="width:500px; margin-bottom:25px">
        <tr>
          <td><b>Name</b></td>
          <td><input type="text" name="container_name" value="{{ data.container.name }}" size="36" required /></td>
        </tr>
        <tr>
          <td><b>Description</b></td>
          <td><textarea name="container_description" rows="3" cols="35'">{{ data.container.description }}</textarea></td>
        </tr>
        <tr>
          <td><b>Group</b></td>
          <td>
            <select name="group_id" style="width: 220px;">
              <option value="">None</option>
              {% for group in data.groups %}
              <option value="{{ group.id }}" {% if data.container.group and group.id == data.container.group.id %}selected{% endif %}>{{ group.name }}</option>
              {% endfor %}
            </select>
          </td>
        </tr>
      </table>
      <!-- <h4>Registry & image</h4>  -->
      <table class="dashboard" style="width:500px; margin-bottom:25px">
        <tr>
          <td><b>Registry</b></td>
          <td><input type="text" name="container_registry" value="{{ data.container.registry }}" size="36" required /></td>
        </tr>
        <tr>
          <td><b>Image&nbsp;name</b></td>
          <td><input type="text" name="container_image_name" value="{{ data.container.image_name }}" size="36" required /></td>
        </tr>
        <tr>
          <td><b>Image tag</b></td>
          <td><input type="text" name="container_image_tag" value="{{ data.container.image_tag }}" size="36" required /></td>
        </tr>
      </table>

      <!-- <h4>Interface</h4>  -->
      <table class="dashboard" style="width:500px; margin-bottom:25px">
        <tr>
          <td style="width:180px"><b>Interface port</b></td>
          {% if data.container.interface_port %}
          <td><input type="text" name="container_interface_port" value="{{ data.container.interface_port }}" size="6" /></td>
          {% else %}
          <td><input type="text" name="container_interface_port" value="" size="6" /></td>
          {% endif %}
        </tr>
        <tr>
          <td style="width:180px"><b>Interface protocol</b></td>
          <td>
            {% if request.user.profile.is_power_user %}
              <input type="text" name="container_interface_protocol" value="{{ data.container.interface_protocol }}" size="6" />
            {% else %}
              <select name="container_interface_protocol" style="width:65px">
                <option value="http" {% if data.container.interface_protocol == 'http' %}selected{% endif %}>http</option>
                <option value="https" {% if data.container.interface_protocol == 'https' %}selected{% endif %}>https</option>
              </select>
            {% endif %}
          </td>
        </tr>
      </table>
      <a href="javascript:void(0);" id="show_button" onclick="toggle_visibility('advanced_div')">Advanced...</a>
      <div id="advanced_div" style="display:none; width:400px;">
        <h4>Advanced <font size=-1>| <a href="javascript:void(0);" id="hide_button" onclick="toggle_visibility('advanced_div')" style="display:none">hide</a></font></h4>
        <table class="dashboard" style="width:500px; margin-bottom:25px">
          <tr>
            <td><b>Image arch</b></td>
            {% if data.container.image_arch %}
            <td><input type="text" name="container_image_arch" value="{{ data.container.image_arch }}" size="8" /></td>
            {% else %}
            <td><input type="text" name="container_image_arch" value="" size="8" /></td>
            {% endif %}
          </tr>
          <tr>
            <td><b>Image OS</b></td>
            <td>
              <select name="container_image_os" style="width:82px">
                <option value="linux" {% if data.container.image_os == 'linux' %}selected{% endif %}>linux</option>
              </select>
            </td>
          </tr>
          <tr>
            <td><b>Image digest</b></td>
            {% if data.container.image_digest %}
            <td><input type="text" name="container_image_digest" value="{{ data.container.image_digest }}" size="30" /></td>
            {% else %}
            <td><input type="text" name="container_image_digest" value="" size="30" /></td>
            {% endif %}
          </tr>
          <tr>
            <td><b>Interface transport</b></td>
            <td>
              <select name="container_interface_transport" style="width:82px">
                <option value="tcp/ip" {% if data.container.interface_transport == 'tcp/ip' %}selected{% endif %}>tcp/ip</option>
              </select>
            </td>
          </tr>
          <tr>
            <td colspan=2>
              <b>Supports custom interface port</b> &nbsp;
              <input type="checkbox" name="container_supports_custom_interface_port" value="True" {% if data.container.supports_custom_interface_port %}checked{% endif %} />
            </td>
          </tr>
          <tr>
            <td colspan=2>
              <b>Supports interface auth</b> &nbsp;
              <input type="checkbox" name="container_supports_interface_auth" value="True" {% if data.container.supports_interface_auth %}checked{% endif %} />
            </td>
          </tr>
          <tr>
            <td colspan=2>
              <b>Disable HTTP auth embedding</b> &nbsp;
              <input type="checkbox" name="container_disable_http_basicauth_embedding" value="True" {% if data.container.disable_http_basicauth_embedding %}checked{% endif %} />
            </td>
          </tr>
          <tr>
            <td><b>Environment variables</b></td>
            <td><textarea name="container_env_vars" rows="2" cols="29">{{ data.container.env_vars|default_if_none:'' }}</textarea></td>
          </tr>
        </table>
      </div>
      <table style="width:400px; border:0; background:#ffffff; margin-top:20px">
        <tr><td align="center">
          <!-- <a href="/software/?container_family_id={{data.container.family_id}}&details=True" class="btn btn-primary" style="margin-left:10px">Back</a>
          &nbsp; -->
          <input type="submit" value="Save" class="btn btn-primary">
        </td></tr>
      </table>
      </form>
    </div>
  </div>
</div>
{% include "footer.html" %}

<script>
function toggle_visibility(id) {
  var e = document.getElementById(id);
  var showBtn = document.getElementById('show_button');
  var hideBtn = document.getElementById('hide_button');
  if(e.style.display == 'block') {
    e.style.display = 'none';
    if (showBtn) showBtn.style.display = 'inline';
    if (hideBtn) hideBtn.style.display = 'none';
  } else {
    e.style.display = 'block';
    if (showBtn) showBtn.style.display = 'none';
    if (hideBtn) hideBtn.style.display = 'inline';
  }
}
</script>