{% extends "app_home/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/_sidebar.html' %}
{% endblock %}

{% block title %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'app_home:prototypes_index' %}">{% translate "UI Prototypes" %}</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ prototype.title }}</li>
  </ol>
</nav>
<h3>{{ prototype.title }}</h3>
<p class="text-muted">{{ prototype.description }}</p>
{% endblock %}


{% block content %}

<div class="card mb-4">
  <div class="card-header cv-proto-subnet-card-header">{% translate "IP Address / CIDR" %}</div>
  <div class="card-body">

    <div class="row g-3 align-items-end">
      <div class="col-md-5">
        <label class="form-label" for="cvProtoIpInput">{% translate "IP Address" %}</label>
        <input type="text" class="form-control cv-proto-subnet-value" id="cvProtoIpInput" value="192.168.1.10">
      </div>
      <div class="col-md-3">
        <label class="form-label" for="cvProtoCidrInput">{% translate "CIDR prefix" %}</label>
        <div class="input-group">
          <span class="input-group-text">/</span>
          <input type="number" class="form-control cv-proto-subnet-value" id="cvProtoCidrInput" min="0" max="32" value="24">
        </div>
      </div>
      <div class="col-md-4">
        <label class="form-label" for="cvProtoCidrRange">{% translate "Prefix slider" %} (<span id="cvProtoCidrRangeLabel">/24</span>)</label>
        <input type="range" class="form-range" id="cvProtoCidrRange" min="0" max="32" value="24">
      </div>
    </div>

    <div class="mt-3">
      <button type="button" class="btn btn-outline-secondary btn-sm cv-proto-subnet-example-btn">192.168.1.10/24</button>
      <button type="button" class="btn btn-outline-secondary btn-sm cv-proto-subnet-example-btn">10.20.0.0/16</button>
      <button type="button" class="btn btn-outline-secondary btn-sm cv-proto-subnet-example-btn">172.16.4.0/22</button>
      <button type="button" class="btn btn-outline-secondary btn-sm cv-proto-subnet-example-btn">8.8.8.8/32</button>
    </div>

  </div>
</div>

<div class="row row-cols-1 row-cols-lg-2 g-3 mb-4">

  <div class="col">
    <div class="card h-100">
      <div class="card-header cv-proto-subnet-card-header">{% translate "Subnet Details" %}</div>
      <div class="card-body p-0">
        <table class="table table-sm mb-0">
          <tbody>
            <tr><th class="w-50">{% translate "IP Address" %}</th><td class="cv-proto-subnet-value">192.168.1.10</td></tr>
            <tr><th>{% translate "CIDR notation" %}</th><td class="cv-proto-subnet-value">/24</td></tr>
            <tr><th>{% translate "Network Mask" %}</th><td class="cv-proto-subnet-value">255.255.255.0</td></tr>
            <tr><th>{% translate "Wildcard Mask" %}</th><td class="cv-proto-subnet-value">0.0.0.255</td></tr>
            <tr><th>{% translate "Network Address" %}</th><td class="cv-proto-subnet-value">192.168.1.0/24</td></tr>
            <tr><th>{% translate "Broadcast Address" %}</th><td class="cv-proto-subnet-value">192.168.1.255</td></tr>
            <tr><th>{% translate "First Usable Host" %}</th><td class="cv-proto-subnet-value">192.168.1.1</td></tr>
            <tr><th>{% translate "Last Usable Host" %}</th><td class="cv-proto-subnet-value">192.168.1.254</td></tr>
            <tr><th>{% translate "Usable Hosts" %}</th><td class="cv-proto-subnet-value">254</td></tr>
            <tr><th>{% translate "Total Addresses" %}</th><td class="cv-proto-subnet-value">256</td></tr>
            <tr><th>{% translate "IP Class" %}</th><td class="cv-proto-subnet-value">C</td></tr>
            <tr><th>{% translate "Address Type" %}</th><td><span class="badge text-bg-secondary">{% translate "Private" %} (RFC1918)</span></td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card h-100">
      <div class="card-header cv-proto-subnet-card-header">{% translate "Binary Breakdown" %}</div>
      <div class="card-body">
        <p class="text-muted mb-2">
          {% translate "Network bits" %}
          <span class="cv-proto-subnet-bit-net">&#9632;</span>
          &nbsp; {% translate "Host bits" %}
          <span class="cv-proto-subnet-bit-host">&#9632;</span>
        </p>
        <div class="mb-3">
          <div class="text-muted small">{% translate "IP Address" %}</div>
          <div class="cv-proto-subnet-bits">
            <span class="cv-proto-subnet-bit-net">11000000</span><span class="cv-proto-subnet-octet-sep">.</span><span class="cv-proto-subnet-bit-net">10101000</span><span class="cv-proto-subnet-octet-sep">.</span><span class="cv-proto-subnet-bit-net">00000001</span><span class="cv-proto-subnet-octet-sep">.</span><span class="cv-proto-subnet-bit-host">00001010</span>
          </div>
        </div>
        <div>
          <div class="text-muted small">{% translate "Network Mask" %}</div>
          <div class="cv-proto-subnet-bits">
            <span class="cv-proto-subnet-bit-net">11111111</span><span class="cv-proto-subnet-octet-sep">.</span><span class="cv-proto-subnet-bit-net">11111111</span><span class="cv-proto-subnet-octet-sep">.</span><span class="cv-proto-subnet-bit-net">11111111</span><span class="cv-proto-subnet-octet-sep">.</span><span class="cv-proto-subnet-bit-host">00000000</span>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<div class="card mb-4">
  <div class="card-header cv-proto-subnet-card-header">{% translate "Divide into Sub-subnets" %}</div>
  <div class="card-body">

    <div class="row g-3 align-items-end">
      <div class="col-md-4">
        <label class="form-label" for="cvProtoSplitSelect">{% translate "New prefix length" %}</label>
        <select class="form-select" id="cvProtoSplitSelect">
          <option>/25 — 2 {% translate "subnets" %} &times; 128 {% translate "addresses" %}</option>
          <option selected>/26 — 4 {% translate "subnets" %} &times; 64 {% translate "addresses" %}</option>
          <option>/27 — 8 {% translate "subnets" %} &times; 32 {% translate "addresses" %}</option>
          <option>/28 — 16 {% translate "subnets" %} &times; 16 {% translate "addresses" %}</option>
        </select>
      </div>
      <div class="col-md-3">
        <button type="button" class="btn btn-primary">
          <i class="fa fa-th-large"></i> {% translate "Generate subnets" %}
        </button>
      </div>
      <div class="col-md-5">
        <p class="text-muted mb-0">4 {% translate "subnets total" %}</p>
      </div>
    </div>

    <div class="cv-proto-subnet-table-wrap mt-3">
      <table class="table table-sm table-hover mb-0">
        <thead class="sticky-top bg-body">
          <tr>
            <th>#</th>
            <th>{% translate "Network" %}</th>
            <th>{% translate "Netmask" %}</th>
            <th>{% translate "First Host" %}</th>
            <th>{% translate "Last Host" %}</th>
            <th>{% translate "Broadcast" %}</th>
            <th>{% translate "Usable Hosts" %}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td class="cv-proto-subnet-value">192.168.1.0/26</td>
            <td class="cv-proto-subnet-value">255.255.255.192</td>
            <td class="cv-proto-subnet-value">192.168.1.1</td>
            <td class="cv-proto-subnet-value">192.168.1.62</td>
            <td class="cv-proto-subnet-value">192.168.1.63</td>
            <td>62</td>
          </tr>
          <tr>
            <td>2</td>
            <td class="cv-proto-subnet-value">192.168.1.64/26</td>
            <td class="cv-proto-subnet-value">255.255.255.192</td>
            <td class="cv-proto-subnet-value">192.168.1.65</td>
            <td class="cv-proto-subnet-value">192.168.1.126</td>
            <td class="cv-proto-subnet-value">192.168.1.127</td>
            <td>62</td>
          </tr>
          <tr>
            <td>3</td>
            <td class="cv-proto-subnet-value">192.168.1.128/26</td>
            <td class="cv-proto-subnet-value">255.255.255.192</td>
            <td class="cv-proto-subnet-value">192.168.1.129</td>
            <td class="cv-proto-subnet-value">192.168.1.190</td>
            <td class="cv-proto-subnet-value">192.168.1.191</td>
            <td>62</td>
          </tr>
          <tr>
            <td>4</td>
            <td class="cv-proto-subnet-value">192.168.1.192/26</td>
            <td class="cv-proto-subnet-value">255.255.255.192</td>
            <td class="cv-proto-subnet-value">192.168.1.193</td>
            <td class="cv-proto-subnet-value">192.168.1.254</td>
            <td class="cv-proto-subnet-value">192.168.1.255</td>
            <td>62</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
</div>

{% endblock %}


{% block script %}
<script>
/* mockup only: keep the CIDR number input and slider visually in sync, no subnet math */
(function () {
  "use strict";

  var elCidr = document.getElementById("cvProtoCidrInput");
  var elRange = document.getElementById("cvProtoCidrRange");
  var elLabel = document.getElementById("cvProtoCidrRangeLabel");

  elRange.addEventListener("input", function () {
    elCidr.value = elRange.value;
    elLabel.textContent = "/" + elRange.value;
  });

  elCidr.addEventListener("input", function () {
    elRange.value = elCidr.value;
    elLabel.textContent = "/" + elCidr.value;
  });
})();
</script>
{% endblock %}