{% extends 'template/template.j2.html' %}
{% block title %}
    {{ $t('sidebar.emailExample') }}
{% endblock %}

{% block content %}
<div class="space-y-6">
  <!-- Page Header -->
  <div class="flex items-center gap-3">
    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-lg">
      <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
      </svg>
    </div>
    <div>
      <h1 class="text-2xl font-bold text-gray-800">{{ $t('email.title') }}</h1>
      <p class="text-sm text-gray-600">{{ $t('Send test emails with SMTP configuration') }}</p>
    </div>
  </div>
  <div class="mt-4 overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
    <div class="p-5">
      <form method="post" action="{{ $e.routeUrl('root.email.post') }}" class="space-y-6">
        <div class="grid gap-4 md:grid-cols-2">
          <div>
            <label for="from" class="mb-1 block text-sm font-medium text-slate-700">{{ $t('email.from') }}</label>
            <input
              value="{{ $n('emailForm/from/value') }}"
              type="text"
              name="from"
              id="from"
              class="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 {{ 'border-rose-500 ring-2 ring-rose-300 focus:border-rose-500 focus:ring-rose-300' if $n('emailForm/from/failed') else '' }}"
            />
            <div class="mt-1 text-sm text-rose-700 {{ '' if $n('emailForm/from/failed') else 'hidden' }}">
              {{ $t($n('emailForm/from/errors/0')) }}
            </div>
          </div>
          <div>
            <label for="fromName" class="mb-1 block text-sm font-medium text-slate-700">{{ $t('email.fromName') }}</label>
            <input
              value="{{ $n('emailForm/fromName/value') }}"
              type="text"
              name="fromName"
              id="fromName"
              placeholder="{{ $t('email.placeholder.name') }}"
              class="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 {{ 'border-rose-500 ring-2 ring-rose-300 focus:border-rose-500 focus:ring-rose-300' if $n('emailForm/fromName/failed') else '' }}"
            />
            <div class="mt-1 text-sm text-rose-700 {{ '' if $n('emailForm/fromName/failed') else 'hidden' }}">
              {{ $t($n('emailForm/fromName/errors/0')) }}
            </div>
          </div>
        </div>

        <div>
          <label for="email" class="mb-1 block text-sm font-medium text-slate-700">{{ $t('email.to') }}</label>
          <input
            value="{{ $n('emailForm/email/value') }}"
            type="email"
            name="email"
            id="email"
            placeholder="{{ $t('email.placeholder.to') }}"
            class="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 {{ 'border-rose-500 ring-2 ring-rose-300 focus:border-rose-500 focus:ring-rose-300' if $n('emailForm/email/failed') else '' }}"
          />
          <div class="mt-1 text-sm text-rose-700 {{ '' if $n('emailForm/email/failed') else 'hidden' }}">
            {{ $t($n('emailForm/email/errors/0')) }}
          </div>
        </div>

        <div>
          <label for="subject" class="mb-1 block text-sm font-medium text-slate-700">{{ $t('email.subject') }}</label>
            <input
              value="{{ $n('emailForm/subject/value') }}"
              type="text"
              name="subject"
              id="subject"
              placeholder="{{ $t('email.placeholder.subject') }}"
              class="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 {{ 'border-rose-500 ring-2 ring-rose-300 focus:border-rose-500 focus:ring-rose-300' if $n('emailForm/subject/failed') else '' }}"
            />
          <div class="mt-1 text-sm text-rose-700 {{ '' if $n('emailForm/subject/failed') else 'hidden' }}">
            {{ $t($n('emailForm/subject/errors/0')) }}
          </div>
        </div>

        <div>
          <label for="message" class="mb-1 block text-sm font-medium text-slate-700">{{ $t('email.message') }}</label>
          <textarea
            name="message"
            id="message"
            placeholder="{{ $t('email.placeholder.message') }}"
            class="min-h-[140px] w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 {{ 'border-rose-500 ring-2 ring-rose-300 focus:border-rose-500 focus:ring-rose-300' if $n('emailForm/message/failed') else '' }}"
          >{{ $n('emailForm/message/value') }}</textarea>
          <div class="mt-1 text-sm text-rose-700 {{ '' if $n('emailForm/message/failed') else 'hidden' }}">
            {{ $t($n('emailForm/message/errors/0')) }}
          </div>
        </div>

        <div class="grid gap-4 md:grid-cols-[1fr,140px]">
          <div>
            <label for="host" class="mb-1 block text-sm font-medium text-slate-700">{{ $t('email.host') }}</label>
            <input
              value="{{ $n('emailForm/host/value') }}"
              type="text"
              name="host"
              id="host"
              placeholder="{{ $t('email.placeholder.host') }}"
              class="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 {{ 'border-rose-500 ring-2 ring-rose-300 focus:border-rose-500 focus:ring-rose-300' if $n('emailForm/host/failed') else '' }}"
            />
            <div class="mt-1 text-sm text-rose-700 {{ '' if $n('emailForm/host/failed') else 'hidden' }}">
              {{ $t($n('emailForm/host/errors/0')) }}
            </div>
          </div>
          <div>
            <label for="port" class="mb-1 block text-sm font-medium text-slate-700">{{ $t('email.port') }}</label>
            <input
              value="{{ $n('emailForm/port/value') if $n('emailForm/port/value') else '1025' }}"
              type="number"
              name="port"
              id="port"
              placeholder="{{ $t('email.placeholder.port') }}"
              class="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 {{ 'border-rose-500 ring-2 ring-rose-300 focus:border-rose-500 focus:ring-rose-300' if $n('emailForm/port/failed') else '' }}"
            />
            <div class="mt-1 text-sm text-rose-700 {{ '' if $n('emailForm/port/failed') else 'hidden' }}">
              {{ $t($n('emailForm/port/errors/0')) }}
            </div>
          </div>
        </div>

        <div class="grid gap-4 md:grid-cols-2">
          <div>
            <label for="username" class="mb-1 block text-sm font-medium text-slate-700">{{ $t('email.username') }}</label>
            <input
              value="{{ $n('emailForm/username/value') }}"
              type="text"
              name="username"
              id="username"
              placeholder="{{ $t('email.placeholder.username') }}"
              class="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 {{ 'border-rose-500 ring-2 ring-rose-300 focus:border-rose-500 focus:ring-rose-300' if $n('emailForm/username/failed') else '' }}"
            />
            <div class="mt-1 text-sm text-rose-700 {{ '' if $n('emailForm/username/failed') else 'hidden' }}">
              {{ $t($n('emailForm/username/errors/0')) }}
            </div>
          </div>
          <div>
            <label for="password" class="mb-1 block text-sm font-medium text-slate-700">{{ $t('email.password') }}</label>
            <input
              value="{{ $n('emailForm/password/value') }}"
              type="password"
              name="password"
              id="password"
              placeholder="{{ $t('email.placeholder.password') }}"
              class="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 {{ 'border-rose-500 ring-2 ring-rose-300 focus:border-rose-500 focus:ring-rose-300' if $n('emailForm/password/failed') else '' }}"
            />
            <div class="mt-1 text-sm text-rose-700 {{ '' if $n('emailForm/password/failed') else 'hidden' }}">
              {{ $t($n('emailForm/password/errors/0')) }}
            </div>
          </div>
        </div>

        <div class="flex flex-wrap gap-6">
          <label for="allowInsecure" class="inline-flex items-center gap-2 text-sm text-slate-700">
            <input
              value="true"
              {{ $n('emailForm/allowInsecure/value') ? 'checked' : '' }}
              type="checkbox"
              name="allowInsecure"
              id="allowInsecure"
              class="h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
            />
            <span>{{ $t('email.allowInsecure') }}</span>
          </label>
          <label for="ssl" class="inline-flex items-center gap-2 text-sm text-slate-700">
            <input
              value="true"
              {{ $n('emailForm/ssl/value') ? 'checked' : '' }}
              type="checkbox"
              name="ssl"
              id="ssl"
              class="h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
            />
            <span>{{ $t('email.ssl') }}</span>
          </label>
        </div>

        {% if sendEmailSuccess %}
        <div class="rounded-md border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-800">{{ $t('email.success') }}</div>
        {% endif %}

        {% if sendEmailFailed %}
        <div class="rounded-md border border-rose-200 bg-rose-50 p-3 text-sm text-rose-800">{{ $t('email.failed') }}</div>
        {% endif %}

        <button type="submit" class="wave inline-flex items-center rounded-md bg-primary-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500/30">
          {{ $t('email.send') }}
        </button>
      </form>
    </div>
  </div>
</div>
{% endblock %}