{% extends "base.html" %}
{% block title %}Sraosha — {% if mode == "create" %}New team{% else %}Edit team{% endif %}{% endblock %}
{% block content %}
<div class="mx-auto max-w-lg space-y-6">
  <a href="/ui/settings/teams" class="text-sm text-indigo-600 hover:underline">&larr; Teams</a>
  <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{% if mode == "create" %}New team{% else %}Edit team{% 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/teams/{{ team_id }}/edit{% else %}/ui/settings/teams/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">Default alerting profile (optional)</label>
      <select name="default_alerting_profile_id" 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">
        <option value="">— None —</option>
        {% for p in alerting_profiles %}
        <option value="{{ p.id }}" {% if form.default_alerting_profile_id|string == p.id|string %}selected{% endif %}>{{ p.name }}</option>
        {% endfor %}
      </select>
    </div>
    <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 %}