{% extends request.ajax ? "layout_blank.html.twig" : "layout_default.html.twig" %}

{% block meta_title %}{{ 'Email'|trans }}{% endblock %}

{% block breadcrumb %}
<li class="breadcrumb-item" aria-current="page"><a href="{{ 'email'|link }}">{{ 'Emails'|trans }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ email.subject }}</li>
{% endblock %}
{% block body_class %}email-email{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-12 card">
        <div class="card-body">
            <h5 class="mb-0">{{ email.subject }}</h5>
            <div class="card-header px-0">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex flex-column gap-1">
                        <span class="d-block"><span class="text-muted me-2">{{ 'From'|trans }}</span>{{ email.sender }}</span>
                        <span class="d-block"><span class="text-muted me-2">{{ 'To'|trans }}</span>{{ email.recipients }}</span>
                    </div>
                    <div class="d-flex flex-column gap-2">
                        <div class="btn-group d-flex" role="group" aria-label="Mail Action">
                            <a class="btn btn-sm btn-outline-secondary email-resend" href="#" data-id="{{ email.id }}" data-bs-toggle="tooltip" data-bs-title="{{ 'Resend'|trans }}">
                                <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6,5.75L10.25,10H7V16H13.5L15.5,18H7A2,2 0 0,1 5,16V10H1.75L6,5.75M18,18.25L13.75,14H17V8H10.5L8.5,6H17A2,2 0 0,1 19,8V14H22.25L18,18.25Z" /></svg>
                            </a>
                            <a class="btn btn-sm btn-outline-danger border-start-0 email-delete" href="#" data-id="{{ email.id }}" data-bs-toggle="tooltip" data-bs-title="{{ 'Delete'|trans }}">
                                <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19M8,9H16V19H8V9M15.5,4L14.5,3H9.5L8.5,4H5V6H19V4H15.5Z" /></svg>
                            </a>
                        </div>
                        <small class="text-muted">{{ email.created_at|format_date }}</small>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <iframe class="ratio ratio-1x1 email" id="email-content" src="about:blank" style="height: 30em"></iframe>
                <script>
                    (function () {
                        frame = document.getElementById("email-content");
                        frame.srcdoc = `{{ email.content_html|raw }}`;
                    })();
                </script>
            </div>
        </div>
</div>
</div>
{% endblock %}

{% block js %}
{% autoescape "js" %}
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", () => {
        const resendEmailBtn = document.querySelectorAll('.email-resend');
        const deleteEmailBtn = document.querySelectorAll('.email-delete');

        resendEmailBtn.forEach((resendBtn) => {
            resendBtn.addEventListener('click', (e) => {
                e.preventDefault();
                toggleLoader();
                API.client.post('email/resend',
                    {id: resendBtn.dataset.id, CSRFToken: "{{ CSRFToken }}"},
                    () => {
                        flashMessage({
                            message: 'Email resent',
                            reload: '{{ 'email'|link }}'
                        });
                    },
                    (res) => {
                        FOSSBilling.message(`${res.message} (${res.code})`, 'error');
                        toggleLoader();
                    }
                )
            });
        });

        deleteEmailBtn.forEach((deleteBtn) => {
            deleteBtn.addEventListener('click', (e) => {
                e.preventDefault();
                if (confirm('Are you sure?')) {
                    toggleLoader();
                    API.client.post('email/delete',
                        {id: deleteBtn.dataset.id, CSRFToken: "{{ CSRFToken }}"},
                        () => {
                            flashMessage({
                                message: 'Email #'+ deleteBtn.dataset.id +' deleted',
                                reload: '{{ 'email'|link }}'
                            });
                        },
                        (res) => {
                            FOSSBilling.message(`${res.message} (${res.code})`, 'error');
                            toggleLoader();
                        }
                    )
                }
            });
        });

        const toggleLoader = () => {
            let loader = document.querySelector('.wait');
            if (loader.style.display === 'none') {
                loader.style.display = 'block';
            } else {
                loader.style.display = 'none';
            }
        }
    });
</script>
{% endautoescape %}
{% endblock %}
