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

<br/>
<br/>

<div class="container">
  <div class="dashboard">
    <div class="span8 offset2">
      <h1>Add software container</h1> 
      <hr>

      {% if not data.added %}

          <h4>Container basics</h4> 
                    
          <form action="#" method="POST">
          {% csrf_token %}

          <table class="dashboard" style="width:360px; margin-bottom:25px">

           <tr>
            <td><b>Name</b></td>
            <td>
             <input type="text" name="container_name" value="" placeholder="" size="23" required />
            </td>
           </tr>

           <tr>
            <td><b>Description</b></td>
            <td>
             <!-- ><input type="text" name="container_description" value="" placeholder="" size="23" required /> -->
             ​<textarea name="container_description" rows="3" cols="22"></textarea>
            </td>
           </tr>
    
    

           <tr>
            <td><b>Registry</b></td><td>
             <input type="text" name="container_registry" value="docker.io" size="23" required />
            </td>
           </tr>

           <tr>
            <td><b>Image</b></td>
            <td>
             <input type="text" name="container_image" value="" placeholder="" size="23" required />
            </td>
           </tr>

           <tr>
            <td><b>Tag</b></td>
            <td>
             <input type="text" name="container_tag" value="latest" size="23" required />
            </td>
           </tr>

           </table>



          <h4>Container interface </h4> 
          <table class="dashboard" style="width:360px; margin-bottom:25px">

           <tr>
            <td><b>Interface port</b></td>
             <td><input type="text" name="container_interface_port" value="" placeholder="" size="5" /></td>
           </tr>

           <tr>
            <td><b>Interface protocol</b></td>
            <td>
             {% if request.user.profile.is_power_user %}
             <input type="text" value="http" name="container_interface_protocol" size="5" /> 
             {% else %}
             <select name="container_interface_protocol" >
             <option value="http" selected>http</option>
             <option value="https" selected>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:360px;">
           <h4>Container advanced settings <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:360px; margin-bottom:25px">

           <tr>
            <td><b>Architecture</b></td><td>
              <select name="container_arch" >
              <option value="x86_64" selected>x86_64</option>
              </select>
            </td>
           </tr>

           <tr>
            <td><b>Operating System</b></td><td>
              <select name="container_os" >
              <option value="linux" selected>linux</option>
              </select>
            </td>
           </tr>

           <tr>
            <td><b>Interface transport</b></td><td>
              <select name="container_interface_transport" >
              <option value="tcp/ip" selected>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" />
            </td>
           </tr>

           <tr>
            <td colspan=2>
             <b>Supports interface auth</b> &nbsp; 
             <input type="checkbox" name="container_supports_interface_auth" value="True" />
            </td>
           </tr>

          </table>
          </div>
          
          <table style="width:360px; border:0; background:#ffffff; margin-top:20px">
          <tr><td align="center">
          <input type="submit" value="Add">
          </td></tr>
          </table>
                    
          </form>

          <br/>          
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          
 
      {% else %}
        Ok, Container added. Go back to your <a href="/containers">container list</a>.
        

      {% endif %} 
  
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      
    </div>
  </div>
</div>

{% include "footer.html" %}

<script>
function toggle_visibility(id) {
      var x = document.getElementById(id);
      var y = document.getElementById('show_button');
      var z = document.getElementById('hide_button');
      if (x.style.display === "none") {
        x.style.display = "block";
        y.style.display = "none"
        z.style.display= "inline"
        
      } else {
        x.style.display = "none";
        y.style.display= "inline"
        z.style.display = "none"
      }
    }
</script>





