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

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

{% block content %}

<div class="row">
    {% for row in range(16) %}
      <div class="ips-row">
      {% for col in range(16) -%}
        {% set ip = row*16 + col %}
        {% set unusable = ip == 0 or ip == 255 %}
        {% set usable = not unusable %}
        <a {% if usable %}href="ip/{{ ip }}"{% endif %}>
        <div class="ips-cell
          {%- if row == 0 %} ips-top{% endif %}
          {%- if col == 0 %} ips-left{% endif %}
          {%- if row == 15 %} ips-bottom{% endif %}
          {%- if col == 15 %} ips-right{% endif %}
          {%- if col == 7 %} ips-ver-half{% endif %}
          {%- if row == 7 %} ips-hor-half{% endif %}
          {% if unusable %} unusable{% endif %}
          {%- if ipmap[ip].dhcp_pool %} dhcp-pool{% endif -%}
          ">
          <div style="display: inline-block; max-height: 52px;">
              <div class="name">
                {% if ipmap[ip].dhcp_pool %}
                    DHCP
                {% else %}
                    {{ ipmap[ip].reserved_by }}
                {% endif %}
              </div>
              <div style="height: 10px;"></div>
          </div>
          {% if usable %}
          {% if ipmap[ip].locked %}
              <span class="lock"><i class="fa fa-lock"></i></span>
          {% endif %}
          <span class="ip">.{{ row*16 + col }}</span>
          {% endif %}
        </div>
        </a>
      {%- endfor %}
      </div>
    {% endfor %}
</div>

<script>
    $(function() {
        $(".ips-cell:not(.unusable)").hover(
            function() {
                $(this).addClass("hover");
            },
            function() {
                $(this).removeClass("hover");
            }
        );
    })
</script>
{% endblock %}