{% 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 Users..."
                    hx-post="{{ url_for('base.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-striped 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">Actions</th>
                    </tr>
                </thead>
                <tbody id="search-results">
                    {% for allocation in allocations %}
                    <tr>
                        <td><b>{{allocation.ipv4}}</b></td>
                        <td>{{allocation.hostname}}</td>
                        <td>{{allocation.description}}</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>
                            {% if allocation.is_used %}
                            <button 
                                hx-get="{{ url_for('base.allocation_edit_modal',net_id=network.id,ipv4=allocation.ipv4) }}?page={{active_page}}" 
                                hx-trigger="click" 
                                hx-target="#modal-edit" 
                                data-bs-toggle="modal" 
                                data-bs-target="#modal-edit" 
                                class="btn btn-sm btn-outline-info"
                                style="padding-top:1px;padding-bottom:1px"
                                > Edit
                            </button>
                            <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-del" 
                                data-bs-toggle="modal" 
                                data-bs-target="#modal-del" 
                                class="btn btn-sm btn-outline-warning"
                                style="padding-top:1px;padding-bottom:1px"
                                > Unallocate
                            </button>
                            {% else %}
                            <button 
                                hx-get="{{ url_for('base.allocation_edit_modal',net_id=network.id,ipv4=allocation.ipv4) }}?page={{active_page}}" 
                                hx-trigger="click" 
                                hx-target="#modal-edit" 
                                data-bs-toggle="modal" 
                                data-bs-target="#modal-edit" 
                                class="btn btn-sm btn-outline-success"
                                style="padding-top:1px;padding-bottom:1px"
                                > Allocate
                            </button>
                            {% endif %}
                        </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 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 %}
                <!--
                {% for page in range(allocations.pages+1) %}
                    {% if page != 0%}
                        <li class="page-item"><a class="page-link {%if page==active_page%}active{%endif%}" href="?page={{page}}">{{page}}</a></li>
                    {% endif %}
                {% endfor %}-->
            </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>
{% endblock %}