{% extends "base.html" %}
{% block title %}Sraosha — {% if mode == "create" %}New alerting profile{% else %}Edit alerting profile{% endif %}{% endblock %}
{% block content %}
<div class="mx-auto max-w-lg space-y-6">
  <a href="/ui/settings/alerting" class="text-sm text-indigo-600 hover:underline">&larr; Alerting</a>
  <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{% if mode == "create" %}New alerting profile{% else %}Edit profile{% endif %}</h1>
  {% if errors %}
  <div class="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-900 dark:bg-red-950/40 dark:text-red-200">
    {% for e in errors %}<p>{{ e }}</p>{% endfor %}
  </div>
  {% endif %}
  <form method="post" action="{% if mode == 'edit' %}/ui/settings/alerting/{{ profile_id }}/edit{% else %}/ui/settings/alerting/new{% endif %}" class="space-y-5 rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
    <div>
      <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
      <input type="text" name="name" value="{{ form.name }}" required class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
    </div>
    <div>
      <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
      <input type="text" name="description" value="{{ form.description or '' }}" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
    </div>
    <div>
      <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Slack channel</label>
      <input type="text" name="slack_channel" value="{{ form.slack_channel or '' }}" placeholder="#data-alerts" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
    </div>
    <div>
      <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
      <input type="text" name="email" value="{{ form.email or '' }}" placeholder="team@company.com" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
    </div>
    <p class="text-xs text-gray-500">Provide at least one of Slack channel or email.</p>
    <button type="submit" class="w-full rounded-lg bg-indigo-600 py-2.5 text-sm font-medium text-white hover:bg-indigo-500">Save</button>
  </form>
</div>
{% endblock %}