{% extends "base.html" %}
{% block title %}
    Mail management
{% endblock title %}
{% block head %}
    {{ super() }}
{% endblock head %}
{% macro delete_modal(modal_id, confirm_text, action, payload) %}
    <button type="button"
            class="btn btn-danger"
            data-bs-toggle="modal"
            data-bs-target="#{{ modal_id }}">Delete</button>
    <div class="modal fade"
         tabindex="-1"
         id="{{ modal_id }}"
         aria-labelledby="{{ modal_id }}Label">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="{{ modal_id }}Label">{{ confirm_text }}</h1>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-footer">
                    <form action="{{ action }}" method="post">
                        {% set payload_len = payload | length %}
                        {% for idx in range(end=payload_len / 2) %}
                            <input type="hidden"
                                   name="{{ payload | nth(n=idx*2) }}"
                                   value="{{ payload | nth(n=idx*2 + 1) }}" />
                        {% endfor %}
                        <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>
{% endmacro delete_modal %}
{% macro add_modal(modal_id, add_button, add_text, action, payload, button_classes, input_name, prefill=false) %}
    <button type="button"
            class="btn btn-primary {{ button_classes }}"
            data-bs-toggle="modal"
            data-bs-target="#{{ modal_id }}">{{ add_button }}</button>
    <div class="modal fade"
         tabindex="-1"
         id="{{ modal_id }}"
         aria-labelledby="{{ modal_id }}Label">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="{{ modal_id }}Label">{{ add_text }}</h1>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ action }}" method="post" id="{{ modal_id }}Form">
                        {% set payload_len = payload | length %}
                        {% for idx in range(end=payload_len / 2) %}
                            <input type="hidden"
                                   name="{{ payload | nth(n=idx*2) }}"
                                   value="{{ payload | nth(n=idx*2 + 1) }}" />
                        {% endfor %}
                        <div class="form-floating mb-3">
                            <input type="email"
                                   class="form-control"
                                   id="{{ modal_id }}Input"
                                   {% if prefill %} placeholder="mail@{{ mail_domain }}" {% else %} placeholder="mail@example.com" {% endif %}
                                   name="{{ input_name }}"
                                   {% if prefill %}value="@{{ mail_domain }}"{% endif %}>
                            <label for="{{ modal_id }}Input">Email address</label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" form="{{ modal_id }}Form">Add</button>
                </div>
            </div>
        </div>
    </div>
    <script>
		const {{ modal_id }}Modal = document.getElementById('{{ modal_id }}');
		const {{ modal_id }}Input = document.getElementById('{{ modal_id }}Input');

		{{ modal_id }}Modal.addEventListener('shown.bs.modal', () => {
			{{ modal_id }}Input.focus()
		});
    </script>
{% endmacro add_modal %}
{% block content %}
    <div class="container">
        <div class="m-2">
            <h1 class="title is-1">Mail management</h1>
            {% if user_error %}
                <div class="alert alert-danger">{{ user_error }}</div>
            {% endif %}
            <h2>Account</h2>
            <div class="text-center">
                <form action="/password" method="post">
                    <div class="form-floating mb-3">
                        <input type="password"
                               class="form-control"
                               id="newPassword"
                               placeholder="password"
                               name="password">
                        <label for="newPassword">New Password</label>
                    </div>
                    <button type="submit" class="btn btn-primary">Change password</button>
                </form>
            </div>
            <h2 class="title is-2 mt-2">Mails</h2>
            <ul class="list-group">
                {% for mail in mails %}
                    <li class="list-group-item d-flex flex-column">
                        <div class="d-flex justify-content-between align-items-center">
                            {{ mail.primary }}
                            {{ self::delete_modal(modal_id="mailDelete" ~ loop.index,
                                                        confirm_text="Delete mail '" ~ mail.primary ~ "'",
                                                        action="/mail/delete",
                                                        payload=["mail", mail.primary]) 
                            }}
                        </div>
						<h3>Aliases</h3>
						<ul class="list-group mt-1">
                            {% set alias_idx = loop.index %}
							{% for alias in mail.aliases %}
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    {{ alias }}
                                    {{ self::delete_modal(modal_id="aliasDelete" ~ alias_idx ~ loop.index,
                                                                        confirm_text="Delete alias '" ~ alias ~ "' (for '" ~ mail.primary ~ "')",
                                                                        action="/alias/delete",
                                                                        payload=["alias", alias]) 
                                    }}
                                </li>
							{% endfor %}
						</ul>
                        {{ self::add_modal(modal_id="addAlias" ~ loop.index,
                                                add_button="Add Alias",
                                                button_classes="mt-2 w-25",
                                                add_text="Add a alias",
                                                action="/alias/add",
                                                input_name="alias",
                                                payload=["mail", mail.primary])
						}}
                    </li>
                {% endfor %}
            </ul>
            {{ self::add_modal(modal_id="addMail",
                        add_button="Add new mail",
                        button_classes="mt-2",
                        add_text="Add new mail",
                        action="/mail/add",
                        input_name="mail",
                        payload=[],
                        prefill=true) 
            }}
            <h2 class="title is-2 mt-2">Lists</h2>
            <ul class="list-group">
                {% for list in lists %}
                    <li class="list-group-item d-flex flex-column">
                        <div class="d-flex justify-content-between align-items-center">
                            {{ list.mail }}
                            {{ self::delete_modal(modal_id="listDelete" ~ loop.index,
                                                        confirm_text="Delete list '" ~ list.mail ~ "'",
                                                        action="/list/delete",
                                                        payload=["name", list.mail]) 
                            }}
                        </div>
                        <h3>Recipients</h3>
                        <ul class="list-group mt-1">
                            {% set list_idx = loop.index %}
                            {% for recpt in list.recipients %}
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    {{ recpt }}
                                    {{ self::delete_modal(modal_id="listRctDelete" ~ list_idx ~ loop.index,
                                                                        confirm_text="Delete recipient '" ~ recpt ~ "' for '" ~ list.mail ~ "'",
                                                                        action="/list/recipient/delete",
                                                                        payload=["list", list.mail, "recipient", recpt]) 
                                    }}
                                </li>
                            {% endfor %}
                        </ul>
                        {{ self::add_modal(modal_id="addRecipient" ~ loop.index,
                                                add_button="Add Recipient",
                                                button_classes="mt-2 w-25",
                                                add_text="Add a new recipient",
                                                action="/list/recipient/add",
                                                input_name="recipient",
                                                payload=["list", list.mail]) 
                        }}
                    </li>
                {% endfor %}
            </ul>
            {{ self::add_modal(modal_id="addAlias",
                        add_button="Add new list",
                        button_classes="mt-2",
                        add_text="Add new list",
                        action="/list/add",
                        input_name="mail",
                        payload=[],
                        prefill=true) 
            }}
        </div>
    </div>
{% endblock content %}