<?php $assetBase =
    basename(rtrim(FCPATH, "\\/")) === "public"
        ? "assets/"
        : "public/assets/"; ?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= esc($template["name"]) ?> · BrandSquare Admin</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="<?= base_url($assetBase . "css/admin.css") ?>">
</head>
<body class="admin-page">
    <aside class="admin-sidebar">
        <a href="<?= base_url(
            "admin/leads",
        ) ?>" class="admin-logo">Brand<span>Square.</span></a>
        <nav><a href="<?= base_url(
            "admin/leads",
        ) ?>"><i>◉</i> Leads</a><a href="<?= base_url(
    "admin/clients",
) ?>"><i>◉</i> Clients</a><a href="<?= base_url(
    "admin/quotations",
) ?>"><i>₹</i> Quotations</a><a href="<?= base_url(
    "admin/invoices",
) ?>"><i>▤</i> Invoices</a><a href="<?= base_url(
    "admin/industries",
) ?>"><i>◆</i> Industries</a><a class="active" href="<?= base_url(
    "admin/email-templates",
) ?>"><i>✦</i> Email templates</a><a href="<?= base_url(
    "admin/articles",
) ?>"><i>▤</i> Articles</a><a href="<?= base_url(
    "admin/settings",
) ?>"><i>⚙</i> Settings</a><a href="<?= base_url() ?>" target="_blank"><i>↗</i> View website</a></nav>
        <div class="admin-user"><span><?= esc(
            strtoupper(substr((string) session("admin_name"), 0, 2)),
        ) ?></span><div><b><?= esc(session("admin_name")) ?></b><small><?= esc(
    session("admin_email"),
) ?></small></div></div>
        <form action="<?= base_url(
            "admin/logout",
        ) ?>" method="post"><?= csrf_field() ?><button class="logout" type="submit">Sign out →</button></form>
    </aside>
    <main class="admin-main template-main">
        <header class="admin-heading template-edit-heading"><div><a class="back-to-templates" href="<?= base_url(
            "admin/email-templates",
        ) ?>">← All templates</a><h1><?= esc(
    $template["name"],
) ?></h1><p><?= esc(
    $template["description"],
) ?></p></div><a class="open-preview" href="<?= base_url(
    "admin/email-templates/" . $template["template_key"] . "/preview",
) ?>" target="_blank">Open full preview ↗</a></header>

        <?php if (session("error")): ?><div class="alert error"><?= esc(
    session("error"),
) ?></div><?php endif; ?>
        <?php if (session("success")): ?><div class="alert success"><?= esc(
    session("success"),
) ?></div><?php endif; ?>

        <div class="template-editor-layout">
            <form method="post" class="template-editor-form">
                <?= csrf_field() ?>
                <section class="settings-card">
                    <div class="settings-title"><span>01</span><div><h2>Delivery</h2><p>Pause this template without losing your content.</p></div><label class="toggle"><input type="checkbox" name="enabled" value="1" <?= old(
                        "enabled",
                        (string) $template["enabled"],
                    ) === "1"
                        ? "checked"
                        : "" ?>><i></i><b>Template active</b></label></div>
                    <div class="settings-fields">
                        <label>Email subject<input name="subject" maxlength="255" required value="<?= esc(
                            old("subject", $template["subject"]),
                        ) ?>"></label>
                        <label>Inbox preview text<input name="preheader" maxlength="255" required value="<?= esc(
                            old("preheader", $template["preheader"]),
                        ) ?>"></label>
                    </div>
                </section>

                <section class="settings-card">
                    <div class="settings-title"><span>02</span><div><h2>Message</h2><p>Use the available placeholders to personalise each email automatically.</p></div></div>
                    <div class="variable-list"><span>Available placeholders</span><div><?php foreach (
                        $variables
                        as $variable
                    ): ?><button type="button" data-variable="<?= esc(
    "{{" . $variable . "}}",
) ?>"><?= esc(
    "{{" . $variable . "}}",
) ?></button><?php endforeach; ?></div></div>
                    <div class="settings-fields">
                        <label>Headline<input name="heading" maxlength="180" required value="<?= esc(
                            old("heading", $template["heading"]),
                        ) ?>"></label>
                        <label>Email message<textarea name="body" rows="13" maxlength="5000" required><?= esc(
                            old("body", $template["body"]),
                        ) ?></textarea></label>
                    </div>
                </section>

                <section class="settings-card">
                    <div class="settings-title"><span>03</span><div><h2>Call to action</h2><p>Leave both button fields empty if this email does not need an action.</p></div></div>
                    <div class="settings-fields two-col">
                        <label>Button label<input name="cta_label" maxlength="80" value="<?= esc(
                            old("cta_label", $template["cta_label"]),
                        ) ?>"></label>
                        <label>Button link<input name="cta_url" maxlength="500" value="<?= esc(
                            old("cta_url", $template["cta_url"]),
                        ) ?>"></label>
                        <label>Accent colour<div class="color-input"><input type="color" value="<?= esc(
                            old("accent_color", $template["accent_color"]),
                        ) ?>" data-color-picker><input name="accent_color" maxlength="7" pattern="#[0-9a-fA-F]{6}" required value="<?= esc(
    old("accent_color", $template["accent_color"]),
) ?>" data-color-value></div></label>
                    </div>
                </section>

                <div class="template-editor-actions"><button type="submit">Save template <span>→</span></button></div>
            </form>

            <aside class="email-preview-panel">
                <div><span>LIVE SAMPLE</span><a href="<?= base_url(
                    "admin/email-templates/" .
                        $template["template_key"] .
                        "/preview",
                ) ?>" target="_blank">Open ↗</a></div>
                <iframe title="Email template preview" src="<?= base_url(
                    "admin/email-templates/" .
                        $template["template_key"] .
                        "/preview",
                ) ?>"></iframe>
                <form method="post" action="<?= base_url(
                    "admin/email-templates/" .
                        $template["template_key"] .
                        "/reset",
                ) ?>" onsubmit="return confirm('Restore the original BrandSquare content for this template?')">
                    <?= csrf_field() ?>
                    <button type="submit" class="reset-template">Restore default template</button>
                </form>
            </aside>
        </div>
    </main>
    <script>
        (() => {
            let activeField = document.querySelector('textarea[name="body"]');
            document.querySelectorAll(".template-editor-form input, .template-editor-form textarea").forEach((field) => {
                field.addEventListener("focus", () => {
                    if (field.type !== "color") activeField = field;
                });
            });
            document.querySelectorAll("[data-variable]").forEach((button) => {
                button.addEventListener("click", () => {
                    if (!activeField) return;
                    const start = activeField.selectionStart ?? activeField.value.length;
                    const end = activeField.selectionEnd ?? start;
                    activeField.setRangeText(button.dataset.variable, start, end, "end");
                    activeField.focus();
                });
            });
            const picker = document.querySelector("[data-color-picker]");
            const value = document.querySelector("[data-color-value]");
            picker?.addEventListener("input", () => {
                value.value = picker.value;
            });
            value?.addEventListener("input", () => {
                if (/^#[0-9a-fA-F]{6}$/.test(value.value)) picker.value = value.value;
            });
        })();
    </script>
</body>
</html>
