{% extends 'panel/_base.html' %}
{% block content %}
{% include 'panel/_nav.html' %}
{% include 'panel/_flash.html' %}
<div class="container" style="margin-top:5vh;">
    <div class="row">
        <!-- Search BAR -->
        <div class="col-12">
            <div class="mb-3">
                <input class="form-control" type="search"
                    name="search" placeholder="Begin Typing To Search Allocation(s)..."
                    hx-post="{{ url_for('network.allocation_search',net_id=network.id) }}"
                    hx-trigger="input changed delay:500ms, keyup[key=='Enter']"
                    hx-target="#search-results"
                    hx-indicator=".htmx-indicator"
                >
            </div>
        </div>
        <!-- IPV4 TABLE -->
        <div class="col-12">
            <table class="table table-hover table-sm">
                <thead>
                    <tr>
                    <th scope="col">IPv4</th>
                    <th scope="col">Hostname</th>
                    <th scope="col">Description</th>
                    <th scope="col">Device</th>
                    <th scope="col">DHCP</th>
                    <th scope="col">GATEWAY</th>
                    <th scope="col">DECOM</th>   
                    {% if current_user.is_reado == False %}<th scope="col">Actions</th>{% endif %}
                    </tr>
                </thead>
                <tbody id="search-results">
                {% include 'panel/_table-alloc.html' %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="d-flex justify-content-between">
        <nav>
            <ul class="pagination">
                {% if allocations.has_prev %}
                <li class="page-item"><a class="page-link" href="?page={{prev_page}}">Previous</a></li>
                {% endif %}
                {% if allocations.has_next %}
                <li class="page-item"><a class="page-link" href="?page={{next_page}}">Next</a></li>
                {% endif %}
            </ul>
        </nav>
        <div>
            {{ allocations.first }} - {{ allocations.last }} of {{ allocations.total }}
        </div>
    </div>
</div>

<!-- MODAL -->
<div id="modal-del"
    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>
<div id="modal-edit"
    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>
<div id="modal-view"
    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 %}