{% 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 216 <= ip <= 239 %} dhcp-pool{% endif -%}
          ">
          <div class="name">
            {% if 99 <= ip <= 103 or ip == 96%}
                Andy
            {% elif 216 <= ip <= 239 %}
                DHCP
            {% endif %}
          </div>
          {% if usable %}
          {% if ip == 14 or ip == 99 %}
              <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 %}