{% extends "admin/change_list.html" %}

{% block object-tools %}
    <div class="bg-body pt-2 pb-3 d-flex justify-content-end">
        <button class="btn btn-primary me-3" data-bs-toggle="modal" data-bs-target="#peggingModal">Add Many Pegs</button>
        <form method="POST" action="/bulk-peg/">
            {% csrf_token %}
            <input type="hidden" name="pegAmount" value="1" min="1" max="1" required="true">
            <button type="submit" class="btn btn-secondary">Add One Peg</button>
        </form>
    </div>
    <div class="modal fade" tabindex="-1" id="peggingModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Bulk Add Pegs</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="/bulk-peg/">
                        {% csrf_token %}
                        <div class="form-group mb-3">
                            <label class="form-label" for="pegAmount">Number of Pegs</label>
                            <input type="number" class="form-control" id="pegAmount" name="pegAmount" min="1" max="9999" required="true">
                        </div>
                        <div class="d-flex">
                            <button type="submit" class="btn btn-success me-auto">Add</button>
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock object-tools %}