{% 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">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>
                            <a href="" class="btn btn-sm btn-outline-info" style="padding-top:1px;padding-bottom:1px">edit</a>
                            <button 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 for="ipv4" class="form-label">IPv4</label>
                        {{ form.ipv4(class="form-control", placeholder=network.network_address) }}
                    </div>
                    <div class="mb-3">
                        <label for="prefix" class="form-label">Hostname</label>
                        {{ form.hostname(class="form-control", placeholder="example") }}
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        {{ form.description(class="form-control", placeholder="webserver") }}
                    </div>
                    <button type="submit" class="btn btn-secondary w-100">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}