{% extends 'base.html' %}

{% block content %}
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <div class="bg-white shadow-sm rounded-lg border border-gray-200 overflow-hidden">
    <div class="px-6 py-5 bg-gray-50 border-b border-gray-200">
      <h1 class="text-lg font-bold text-gray-900">
        {% if object %}Edit Alert Profile — {{ object.name }}{% else %}New Alert Profile{% endif %}
      </h1>
      <p class="text-xs text-gray-400 mt-0.5">
        Alert thresholds and Telegram notification settings for this monitoring rule.
      </p>
    </div>

    <form method="post" class="p-6 space-y-5">
      {% csrf_token %}
      {% for field in form %}
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">{{ field.label }}</label>
        {{ field }}
        {% if field.help_text %}<p class="text-xs text-gray-400 mt-1">{{ field.help_text }}</p>{% endif %}
        {% for error in field.errors %}<p class="text-xs text-red-600 mt-1">{{ error }}</p>{% endfor %}
      </div>
      {% endfor %}

      <div class="flex items-center gap-3 pt-2">
        <button type="submit"
                class="inline-flex items-center px-5 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700">
          <i class="fas fa-save mr-2"></i> Save Profile
        </button>
        <a href="{% url 'nginxmon-dashboard' %}" class="text-sm text-gray-500 hover:text-gray-700">Cancel</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}