<div class="max-w-lg">
  <h3 class="text-lg font-semibold mb-4" style="color: var(--text-primary);">Alert Configuration</h3>

  {% if validation_error %}
  <div class="mb-4 p-3 rounded text-sm" style="background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;">
    {{ validation_error }}
  </div>
  {% endif %}

  {% if success_message %}
  <div class="mb-4 p-3 rounded text-sm" style="background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0;">
    {{ success_message }}
  </div>
  {% endif %}

  <form hx-put="/dashboard/partials/alert-config/{{ project_id }}"
        hx-target="#tab-content"
        hx-swap="innerHTML">
    <div class="mb-4">
      <label for="alert_threshold" class="block text-sm font-medium mb-1" style="color: var(--text-primary);">
        Score Drop Threshold (1-50 points)
      </label>
      <input type="number" id="alert_threshold" name="alert_threshold"
             value="{{ alert_threshold }}"
             min="1" max="50"
             class="w-full px-3 py-2 rounded text-sm"
             style="background: var(--bg-primary); border: 1px solid var(--border-default); color: var(--text-primary);">
    </div>

    <div class="mb-4">
      <label for="alert_email" class="block text-sm font-medium mb-1" style="color: var(--text-primary);">
        Alert Email
      </label>
      <input type="email" id="alert_email" name="alert_email"
             value="{{ alert_email }}"
             class="w-full px-3 py-2 rounded text-sm"
             style="background: var(--bg-primary); border: 1px solid var(--border-default); color: var(--text-primary);"
             required>
    </div>

    <div class="mb-4">
      <label for="webhook_url" class="block text-sm font-medium mb-1" style="color: var(--text-primary);">
        Webhook URL (HTTPS, optional)
      </label>
      <input type="url" id="webhook_url" name="webhook_url"
             value="{{ webhook_url }}"
             placeholder="https://..."
             class="w-full px-3 py-2 rounded text-sm"
             style="background: var(--bg-primary); border: 1px solid var(--border-default); color: var(--text-primary);">
    </div>

    <button type="submit"
            class="px-4 py-2 rounded text-sm font-medium"
            style="background: var(--accent); color: #ffffff;">
      Save Configuration
    </button>
  </form>
</div>
