{% extends "base.html" %}
{% block title %}Subir Circuito{% endblock %}

{% block head %}
  {{ super() }}
{% endblock %}

{% block content %}

<div class="row">
  <h3>Asignación de {{ addr }}</h3>
</div>

{% if meta.locked %}
<div class="row">
    <div class="alert alert-warning"><i class="fa fa-lock"></i> Esta dirección está reservada por <i>Ilúvatar</i></div>
</div>
{% endif %}

<div class="row">

 <form class="form-horizontal" method="POST">
 {% if meta.locked %}
 <fieldset id="whole-fieldset" disabled>
 {% endif %}

  <div class="form-group">
   <div class="col-xs-11">
    <input type="checkbox" id="reserved" name="reserved"
           {% if meta.reserved_by -%}
             checked="checked"
           {%- endif -%}>
    <label for="reserved">Etiqueta:</label>
    <fieldset id="label-fieldset" disabled>
     <div class="row">
     <div class="col-xs-6">
      <input type="text" class="form-control"
                    id="reserved-by" name="reserved-by"
                 {% if meta.reserved_by -%}
                     value="{{ meta.reserved_by }}"
                 {%- endif -%}
                 />
     </div>
      <div class="col-xs-6">
       {% set meta_color = "black" %}
       {% if meta.color %}{% set meta_color = meta.color %}{% endif %}

       {% for color in valid_colors %}
         <span class="color-sample c-{{ color }}
         {%- if color == meta_color %} selected{% endif -%}"
         {%- if color != 'black' %} data-color="{{ color }}"{% endif %}
         ><i class="fa fa-square"></i></span>
       {% endfor %}
       <input type="hidden" id="label-color" name="label-color"
              value="{{ meta.color if meta.color }}"/>
      </div>
     </div>
   </fieldset>
  </div>
 </div>

  <div class="form-group">
      <div class="col-xs-11">
   <input type="checkbox" id="dhcp" name="dhcp"
       {% if meta.dhcp_pool or meta.macs %}checked="checked"{% endif %}/>
   <label for="dhcp">Ofrecer por DHCP</label>
   <fieldset id="dhcp-fieldset" disabled>
   <div class="form-group">
     <div class="col-sm-offset-1">
       <input type="radio" id="dhcp-client-pool" name="dhcp-client" value="pool"
        {% if meta.dhcp_pool %}checked="checked"{% endif %}/>
       <label for="dhcp-client-pool">A cualquier dispositivo</label>
     </div>
   </div>
   <div class="form-group">
     <div class="col-sm-offset-1">
       <input type="radio" id="dhcp-client-specific" name="dhcp-client" value="mac"
       {% if meta.macs %}checked="checked"{% endif %}/>
       <label for="dhcp-client-specific">A un dispositivo específico</label>
       <div class="form-group">
        <fieldset id="dhcp-specific-fieldset" disabled>
         <div>
             <label for="dhcp-client-mac" class="col-sm-4 control-label">MAC:</label>
             <div class="col-sm-5">
             <input type="text" class="form-control" name="dhcp-client-mac"
                    value="{{ meta.macs|join(",") }}"/>
             </div>
         </div>
         <div>
             <label for="dhcp-custom-gw" class="col-sm-4 control-label">
                 Gateway alternativo:
             </label>
             <div class="col-sm-5">
             <input type="text" class="form-control" name="dhcp-gw"
                    value="{{ meta.gw if meta.gw }}"/>
             </div>
         </div>
        </fieldset>
       </div>
     </div>
   </div>
   </fieldset>
  </div>
  </div>

  {% if create_error %}
  <center>
  <p>Error: {{ errormsg }}</p>
  </center>
  {% endif %}
  <div class="form-group">
   <div class="col-xs-11">
    <button type="submit" class="btn btn-default">Guardar</button>
   </div>
  </div>
  {% if meta.locked %}
  <fieldset disabled>
  {% endif %}
</form>
</div>

<div class="row">
    <a href="{{ url_for('ips') }}">Regresar</a>
</div>

<script>
    $(function() {
        $("#reserved").change(function() {
            $("#label-fieldset").prop("disabled", !$(this).prop("checked"));
        })
        $("#dhcp").change(function() {
            $("#dhcp-fieldset").prop("disabled", !$(this).prop("checked"));
        })
        $("input[type=radio]").change(function() {
            $("#dhcp-specific-fieldset").prop("disabled", !$("#dhcp-client-specific").prop("checked"));
        })
        $(".color-sample").click(function() {
            var disabled = false;
            $(this).parents("fieldset").each(function() {
                disabled = $(this).prop("disabled") || disabled;
            });
            if (disabled)
                return;
            $(".color-sample").removeClass("selected");
            $(this).addClass("selected");
            $("#label-color").val($(this).data().color);
        });
        $("input").change()
    });
</script>

{% endblock %}