{% extends 'panel/_base.html' %}
{% block content %}
{% include 'panel/_nav.html' %}
{% include 'panel/_flash.html' %}
<div class="container" style="margin-top:5vh;">
    <div class="row">
        <!-- IPV4 TABLE -->
        <div class="col-9">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                    <th scope="col">Network</th>
                    <th scope="col">IPv4</th>
                    <th scope="col">Hostname</th>
                    <th scope="col">Description</th>
                    <th scope="col">Device</th>
                    <th scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for allocation in allocations %}
                    <tr>
                        <th scope="row">{{network.network_address}}</th>
                        <td>{{allocation.ipv4}}</td>
                        <td>{{allocation.hostname}}</td>
                        <td><b>{{allocation.description}}</b></td>
                        <td>
                            {% if Inventory.query.filter_by(id=allocation.device_id).first() %}
                            <a href="{{Inventory.query.filter_by(id=allocation.device_id).first().id}}" style="text-decoration:none;">link</a>
                            {% else %}
                            N/A
                            {% endif %}
                        </td>
                        <td>
                            <a href="" class="btn btn-sm btn-outline-info" style="padding-top:1px;padding-bottom:1px">edit</a>
                            <button 
                                hx-get="{{ url_for('base.allocation_del_modal',net_id=network.id,ipv4=allocation.ipv4) }}?page={{active_page}}" 
                                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>
        <!-- IPV4 FORM -->
        <div class="col-3">
            <div class="card p-4 shadow rounded-3">
                <h2 class="text-center mb-4">Add IPv4</h2>
                <form method="POST">
                    {{ form.csrf_token }}
                    <div class="mb-3">
                        <label class="form-label">IPv4</label>
                        {{ form.ipv4(class="form-control", placeholder=network.network_address) }}
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Hostname</label>
                        {{ form.host_name(class="form-control", placeholder="example") }}
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        {{ form.host_desc(class="form-control", placeholder="webserver") }}
                    </div>
                    <button type="submit" class="btn btn-secondary w-100">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>
<nav class="d-flex flex-row justify-content-center align-items-center">
    <ul class="pagination">
        {% for page in allocations.iter_pages() %}
        <li class="page-item"><a class="page-link" href="?page={{page}}">{{page}}</a></li>
        {% endfor %}
    </ul>
</nav>
<!-- 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 %}