emailtemplate.it/public/index.php

<?php
$pageTitle  = 'Email Template System – Admin';
$pageId     = 'home';
$navActive  = null;
require __DIR__ . '/../partials/structure/layout_start.php';
?>
  <main class="max-w-6xl mx-auto p-4 flex-1 w-full space-y-6">
    <section class="bg-white border border-slate-200 rounded-2xl shadow-sm px-4 py-3 flex flex-wrap items-center gap-3 sticky top-20 z-10">
      <h1 class="font-semibold text-lg text-slate-900 me-2">Email Template System</h1>
      <nav class="isolate inline-flex rounded-2xl shadow-sm border bg-white overflow-hidden">
        <button type="button" data-tab="templates" class="px-4 py-2 text-sm border-e bg-sky-50 text-sky-700">Templates</button>
        <button type="button" data-tab="sections"  class="px-4 py-2 text-sm border-e">Sections</button>
        <button type="button" data-tab="blocks"    class="px-4 py-2 text-sm border-e">Blocks</button>
        <button type="button" data-tab="snippets"  class="px-4 py-2 text-sm">Snippets</button>
      </nav>
      <div class="flex items-center gap-3 ms-auto">
        <button id="btn-new" type="button" class="btn">Neu …</button>
      </div>
    </section>

    <section id="view-templates" class="view"></section>
    <section id="view-sections" class="view hidden"></section>
    <section id="view-blocks" class="view hidden"></section>
    <section id="view-snippets" class="view hidden"></section>
  </main>

  <!-- Create Dialog -->
  <dialog id="createDialog" class="rounded-2xl p-0 w-[540px]">
    <form id="createForm" method="dialog" class="p-4 bg-white rounded-2xl">
      <h3 class="text-lg font-semibold mb-2">Neues Element erstellen</h3>
      <p id="createHint" class="text-sm text-slate-600 mb-3"></p>
      <div class="space-y-3" id="createFields"></div>
      <div class="mt-4 flex justify-end gap-2">
        <button type="button" id="createCancel" class="btn">Abbrechen</button>
        <button type="submit" id="createSubmit" class="btn">Erstellen</button>
      </div>
    </form>
  </dialog>

  <!-- Delete Confirm Dialog -->
  <dialog id="deleteDialog" class="rounded-2xl p-0 w-[520px]">
    <form id="deleteForm" method="dialog" class="p-4 bg-white rounded-2xl">
      <h3 class="text-lg font-semibold mb-2">Eintrag löschen?</h3>
      <p id="deleteText" class="text-sm text-slate-600 mb-4"></p>
      <div class="mt-1 flex justify-end gap-2">
        <button type="button" id="deleteCancel" class="btn">Abbrechen</button>
        <button type="submit" class="btn btn-danger">Löschen</button>
      </div>
    </form>
  </dialog>

  <!-- Editor Dialog -->
  <dialog id="editorDialog" class="rounded-2xl p-0 w-[95vw] h-[90vh]">
    <div class="h-full flex flex-col">
      <div class="px-4 py-2 border-b flex items-center gap-2 bg-white/80 backdrop-blur">
        <strong class="me-auto">E-Mail Editor</strong>
        <button id="btn-clear-main" type="button" class="btn" title="Leeren">🧹</button>
        <button id="btn-preview" type="button" class="btn">Vorschau</button>
        <button id="btn-test" type="button" class="btn">Testversand</button>
        <button id="btn-save" type="button" class="btn">Speichern</button>
        <button id="btn-close" type="button" class="btn">Schließen</button>
      </div>
      <iframe id="editorFrame" src="about:blank" class="flex-1 w-full"></iframe>
    </div>
  </dialog>

  <!-- Preview Dialog -->
  <dialog id="previewDialog" class="rounded-2xl p-0 w-[90vw] h-[90vh]">
    <div class="h-full flex flex-col">
      <div class="px-4 py-2 border-b flex items-center gap-2 bg-white/80 backdrop-blur">
        <strong class="me-auto">Vorschau</strong>
        <button id="btn-close-preview" type="button" class="btn">Schließen</button>
      </div>
      <iframe id="previewFrame" class="flex-1 w-full"></iframe>
    </div>
  </dialog>

  <!-- Test Send Dialog -->
  <dialog id="sendTestDialog" class="rounded-2xl p-0 w-[480px]">
    <form id="sendTestForm" method="dialog" class="p-4 bg-white rounded-2xl space-y-4">
      <h3 class="text-lg font-semibold">Testversand</h3>
      <p id="send_template_info" class="text-sm text-slate-600">Kein Template ausgewählt.</p>
      <label class="block">
        <span class="text-sm text-slate-600">Empfänger (E-Mail)</span>
        <input id="send_to" type="email" required class="mt-1 w-full border rounded-lg px-3 py-2" placeholder="name@example.com" />
      </label>
      <label class="block">
        <span class="text-sm text-slate-600">Betreff</span>
        <input id="send_subject" type="text" class="mt-1 w-full border rounded-lg px-3 py-2" value="Testversand" />
      </label>
      <label class="block">
        <span class="text-sm text-slate-600">Absender</span>
        <select id="send_sender" class="mt-1 w-full border rounded-lg px-3 py-2">
          <option value="">Standard (System)</option>
        </select>
        <p id="send_sender_hint" class="text-xs text-slate-500 mt-1 hidden">Keine individuellen Absender gefunden. Lege sie unter „Mein Konto“ an.</p>
      </label>
      <div class="flex justify-end gap-2">
        <button type="button" id="btn-cancel-send" class="btn">Abbrechen</button>
        <button type="submit" id="btn-send-now" class="btn">Senden</button>
      </div>
    </form>
  </dialog>

  <!-- Edit Snippet Dialog -->
  <dialog id="editSnippetDialog" class="rounded-2xl p-0 w-[700px]">
    <form id="editSnippetForm" method="dialog" class="p-4 bg-white rounded-2xl">
      <h3 class="text-lg font-semibold mb-2">Snippet bearbeiten</h3>
      <div class="space-y-3">
        <label class="block">
          <span class="text-sm text-slate-600">Name</span>
          <input id="edit_snip_name" type="text" class="w-full border rounded-lg px-3 py-2" />
        </label>
        <label class="block">
          <span class="text-sm text-slate-600">Content (HTML)</span>
          <textarea id="edit_snip_content" class="w-full border rounded-lg px-3 py-2 h-64 font-mono text-sm"></textarea>
        </label>
      </div>
      <div class="mt-4 flex justify-end gap-2">
        <button type="button" id="editSnippetCancel" class="btn">Abbrechen</button>
        <button type="submit" id="editSnippetSave" class="btn">Speichern</button>
      </div>
    </form>
  </dialog>

  <div id="toast-root"></div>
<?php
$layoutScripts = [
    ['src' => app_asset_url('/assets/js/toast.js')],
    ['src' => app_asset_url('/assets/js/app.js'), 'module' => true],
];
require __DIR__ . '/../partials/structure/layout_end.php';