{% extends "freeform/_layouts/main" %}
{% import "_includes/forms" as forms %}

{% set selectedSubnavItem = "notifications" %}
{% set saveShortcutRedirect = 'freeform/notifications/wrappers/{id}' %}

{% set segment3 = craft.app.request.getSegment(3) %}

{% set crumbs = [
    { label: craft.freeform.name, url: url("freeform") },
    { label: "Notification Wrappers"|t("freeform"), url: url("freeform/notifications/wrappers") },
    { label: title|t("freeform"), url: url("freeform/notifications/wrappers/" ~ segment3) },
] %}

{% set fullPageForm = true %}

{% block actionButton %}
    <div class="buttons">
        <div class="btngroup submit">
            <input type="submit" class="btn submit" value="{{ 'Save'|t('freeform') }}">

            <div class="btn submit menubtn"></div>
            <div class="menu">
                <ul>
                    <li>
                        <a class="formsubmit" data-redirect="{{ ('freeform/notifications/wrappers/{id}')|hash }}">
                            {{ "Save and continue editing"|t('freeform') }}
                            <span class="shortcut">⌘S</span>
                        </a>
                    </li>
                    <li>
                        <a class="formsubmit" data-redirect="{{ url('freeform/notifications/wrappers/new')|hash }}">
                            {{ "Save and add another"|t('freeform') }}
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}

    <div class="flex-fields">

        <input type="hidden" name="action" value="freeform/notifications/wrappers/save">
        {{ redirectInput('freeform/notifications/wrappers') }}
        {% if wrapper.id %}<input type="hidden" name="id" value="{{ wrapper.id }}">{% endif %}
        {{ csrfInput() }}

        {{ forms.textField({
            first: true,
            label: "Name"|t('freeform'),
            instructions: "What this template will be called in the control panel."|t('freeform'),
            id: 'name',
            name: 'name',
            value: wrapper.name,
            errors: wrapper.getErrors('name'),
            autofocus: true,
            required: true,
        }) }}

        {{ forms.textField({
            first: true,
            label: "Handle"|t('freeform'),
            instructions: "Unique identifier for this template."|t('freeform'),
            id: 'handle',
            name: 'handle',
            value: wrapper.handle,
            errors: wrapper.getErrors('handle'),
            required: true,
        }) }}

        {{ forms.textareaField({
            label: "Description"|t('freeform'),
            instructions: "Description of this template."|t('freeform'),
            id: "description",
            name: "description",
            value: wrapper.description,
            errors: wrapper.getErrors("description"),
        }) }}

        <hr>

        {{ forms.textareaField({
            label: "HTML Content"|t('freeform'),
            instructions: "The HTML content that wraps the email notification. Include `{{ emailBody }}` where you want the notification content to appear."|t('freeform'),
            id: "content",
            name: "content",
            value: wrapper.content,
            errors: wrapper.getErrors("content"),
            required: true,
        }) }}

        <style>
            #content-field {
                margin-bottom: 10px !important;
            }

            #editor {
                display: none;
                overflow: hidden;

                width: 100%;
                height: 400px;

                border: 1px solid #e0e5ea;
                border-left: none;
                border-right: none;
            }

            .ace_gutter-layer, .ace_gutter-cell {
                background: #f4f7fc;
            }

            #editor:not(.ace_focus) .ace_active-line {
                background: #f4f7fc !important;
            }

            #emailBody {
                display: none;
            }
        </style>
        <div id="editor">{{ wrapper.content }}</div>

    </div>

{% endblock %}

{% js %}
    {% if not wrapper.handle %}new Craft.HandleGenerator('#name', '#handle');{% endif %}

    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/textmate");
    var textarea = $('textarea[name="content"]').hide();

    editor.getSession().setValue(textarea.val());
    editor.getSession().on('change', function(){
        textarea.val(editor.getSession().getValue());
    });

    editor.getSession().setUseWorker(false);
    editor.getSession().setMode("ace/mode/twig");

    document.getElementById("editor").style.display = "block";
{% endjs %}