{% extends 'panel/_base.html' %}
{% block content %}
{% include 'panel/_nav.html' %}
{% include 'panel/_flash.html' %}
<div class="container" style="margin-top:5vh;">
    <div class="row">
        <!-- PREFIXES TABLE -->
        <div class="col-9">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                    <th scope="col">#</th>
                    <th scope="col">Subnet</th>
                    <th scope="col">Prefix</th>
                    <th scope="col">Usage</th>
                    <th scope="col">Description</th>
                    <th scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for network in prefixes %}
                    <tr>
                        <th scope="row">{{network.id}}</th>
                        <td>{{network.network_address}}</td>
                        <td>{{network.prefix}}</td>
                        <td>{{Allocation.query.filter_by(net_id=network.id,is_used=True).count()}} / {{network.hosts}} </td>
                        <td><b>{{network.description}}</b></td>
                        <td>
                            <a href="{{ url_for('base.allocations',net_id=network.id) }}?page=1" class="btn btn-sm btn-outline-info" style="padding-top:1px;padding-bottom:1px">Allocations</a>
                            <button 
                                hx-get="{{ url_for('base.network_del_modal',net_id=network.id) }}" 
                                hx-trigger="click" 
                                hx-target="#modal-get" 
                                data-bs-toggle="modal" 
                                data-bs-target="#modal-get" 
                                class="btn btn-sm btn-outline-danger"
                                style="padding-top:1px;padding-bottom:1px"
                                > Delete
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <!-- PREFIX FORM -->
        <div class="col-3">
            <div class="card p-4 shadow rounded-3">
                <h2 class="text-center mb-4">Add Network</h2>
                <form method="POST">
                    {{ form.csrf_token }}
                    <div class="mb-3">
                        <label for="subnet" class="form-label">Subnet</label>
                        {{ form.subnet(class="form-control", placeholder="192.168.0.0") }}
                    </div>
                    <div class="mb-3">
                        <label for="prefix" class="form-label">Prefix</label>
                        {{ form.prefix(class="form-control", placeholder="24") }}
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        {{ form.description(class="form-control", placeholder="local area network...") }}
                    </div>
                    <button type="submit" class="btn btn-secondary w-100">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- MODAL -->
<div id="modal-get"
    class="modal modal-blur fade"
    style="display: none"
    aria-hidden="false"
    tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content"></div>
    </div>
</div>
{% endblock %}