mail-accounts/templates/home.html

{% extends "base.html" %}
{% block title %}
    Mail management
{% endblock title %}
{% block head %}
    {{ super() }}
{% endblock head %}
{% block content %}
    <div class="container">
        <h1 class="title is-1">Mail management</h1>
        <h2 class="title is-2">Mails</h2>
        <ul class="list-group">
            {% for mail in mails %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    {{ mail.mail }}
                    <button type="button"
                            class="btn btn-danger"
                            data-bs-toggle="modal"
                            data-bs-target="#mailDelete{{ loop.index }}">Delete</button>
                    <div class="modal fade"
                         tabindex="-1"
                         id="mailDelete{{ loop.index }}"
                         aria-labelledby="mailDeleteLabel{{ loop.index }}">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="mailDeleteLabel{{ loop.index }}">Delete mail '{{ mail.mail }}'</h1>
                                    <button type="button"
                                            class="btn-close"
                                            data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                </div>
                                <div class="modal-footer">
                                    <form action="/mail/delete" method="post">
                                        <input type="hidden" name="mail" value="{{ mail.mail }}" />
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                        <button type="submit" class="btn btn-danger">Delete</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            {% endfor %}
        </ul>
    </div>
{% endblock content %}