{% extends 'adminpanel/base.html' %}
{% block title %}Settings · Admin Dashboard{% endblock %}
{% block page_title %}Settings{% endblock %}
{% block content %}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
  <!-- Notifications -->
  <div class="lg:col-span-2 p-5 rounded-xl bg-slate-900 border border-slate-800">
    <h2 class="font-semibold text-slate-100 mb-1">Notifications</h2>
    <p class="text-slate-400 text-sm mb-4">Control which automated emails are sent to users.</p>
    <form method="post" class="space-y-4">
      {% csrf_token %}
      <input type="hidden" name="action" value="update_notifications">

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <label class="flex items-start gap-3 p-3 rounded-lg bg-slate-800/60 border border-slate-700 cursor-pointer">
          <input type="checkbox" name="welcome" {% if notifications.welcome %}checked{% endif %} class="mt-1.5">
          <span>
            <span class="block font-medium text-slate-100">Welcome email</span>
            <span class="text-slate-400 text-sm">Send onboarding email after successful verification.</span>
          </span>
        </label>

        <label class="flex items-start gap-3 p-3 rounded-lg bg-slate-800/60 border border-slate-700 cursor-pointer">
          <input type="checkbox" name="verification" {% if notifications.verification %}checked{% endif %} class="mt-1.5">
          <span>
            <span class="block font-medium text-slate-100">Account verified</span>
            <span class="text-slate-400 text-sm">Notify users when admins verify their account.</span>
          </span>
        </label>

        <label class="flex items-start gap-3 p-3 rounded-lg bg-slate-800/60 border border-slate-700 cursor-pointer">
          <input type="checkbox" name="suspension" {% if notifications.suspension %}checked{% endif %} class="mt-1.5">
          <span>
            <span class="block font-medium text-slate-100">Account suspended</span>
            <span class="text-slate-400 text-sm">Email when an admin deactivates an account.</span>
          </span>
        </label>

        <label class="flex items-start gap-3 p-3 rounded-lg bg-slate-800/60 border border-slate-700 cursor-pointer">
          <input type="checkbox" name="withdrawal_approved" {% if notifications.withdrawal_approved %}checked{% endif %} class="mt-1.5">
          <span>
            <span class="block font-medium text-slate-100">Withdrawal approved</span>
            <span class="text-slate-400 text-sm">Notify users when withdrawals are approved.</span>
          </span>
        </label>

        <label class="flex items-start gap-3 p-3 rounded-lg bg-slate-800/60 border border-slate-700 cursor-pointer">
          <input type="checkbox" name="withdrawal_declined" {% if notifications.withdrawal_declined %}checked{% endif %} class="mt-1.5">
          <span>
            <span class="block font-medium text-slate-100">Withdrawal declined</span>
            <span class="text-slate-400 text-sm">Notify users with the decline reason.</span>
          </span>
        </label>
      </div>

      <div class="pt-2">
        <button type="submit" class="px-4 py-2 rounded-md bg-amber-600 hover:bg-amber-500 text-white font-medium">Save changes</button>
      </div>
    </form>
  </div>

  <!-- System & Maintenance -->
  <div class="space-y-5">
    <div class="p-5 rounded-xl bg-slate-900 border border-slate-800">
      <h2 class="font-semibold text-slate-100 mb-1">System</h2>
      <p class="text-slate-400 text-sm mb-4">Runtime information (read-only).</p>
      <dl class="text-sm text-slate-300 space-y-2">
        <div class="flex justify-between gap-6"><dt class="text-slate-400">Email backend</dt><dd>{{ email_backend }}</dd></div>
        <div class="flex justify-between gap-6"><dt class="text-slate-400">Default from email</dt><dd>{{ default_from_email }}</dd></div>
        <div class="flex justify-between gap-6"><dt class="text-slate-400">Database</dt><dd>{{ database_engine }}</dd></div>
        <div class="flex justify-between gap-6"><dt class="text-slate-400">Debug mode</dt><dd>{% if debug_mode %}<span class="text-amber-400">ON</span>{% else %}<span class="text-amber-400">OFF</span>{% endif %}</dd></div>
        <div class="flex justify-between gap-6"><dt class="text-slate-400">Allowed hosts</dt><dd>{{ allowed_hosts|join:', ' }}</dd></div>
      </dl>
    </div>

    <div class="p-5 rounded-xl bg-slate-900 border border-slate-800">
      <h2 class="font-semibold text-slate-100 mb-1">Maintenance</h2>
      <p class="text-slate-400 text-sm mb-4">Quick actions to keep things healthy.</p>
      <form method="post" class="mb-3">
        {% csrf_token %}
        <input type="hidden" name="action" value="clear_cache">
        <button class="px-4 py-2 rounded-md bg-slate-700 hover:bg-slate-600 text-white font-medium">Clear cache</button>
      </form>
    </div>

    <div class="p-5 rounded-xl bg-slate-900 border border-slate-800">
      <h2 class="font-semibold text-slate-100 mb-1">Send test email</h2>
      <p class="text-slate-400 text-sm mb-4">Verify SMTP configuration by sending a quick test.</p>
      <form method="post" class="space-y-3">
        {% csrf_token %}
        <input type="hidden" name="action" value="email_test">
        <div>
          <label class="text-sm text-slate-300">To</label>
          <input name="to_email" type="email" value="{{ request.user.email }}" class="w-full mt-1 px-3 py-2 rounded-md bg-slate-800 border border-slate-700 text-slate-100" />
        </div>
        <div>
          <label class="text-sm text-slate-300">Subject</label>
          <input name="subject" value="Test Email" class="w-full mt-1 px-3 py-2 rounded-md bg-slate-800 border border-slate-700 text-slate-100" />
        </div>
        <div>
          <label class="text-sm text-slate-300">Message</label>
          <textarea name="message" rows="3" class="w-full mt-1 px-3 py-2 rounded-md bg-slate-800 border border-slate-700 text-slate-100">This is a test email from the Trademont admin panel.</textarea>
        </div>
        <div>
          <button class="px-4 py-2 rounded-md bg-orange-600 hover:bg-orange-500 text-white font-medium">Send test</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}