<!--
  Familiar - Self-hosted AI Agent
  Copyright (c) 2026 George Scott Foley
  
  Licensed under the MIT License
  For commercial licensing, contact: licensing@familiar.ai
-->
{% extends "base.html" %}

{% block title %}Create Budget Alert - Familiar Admin{% endblock %}

{% block content %}
<div class="max-w-xl mx-auto">
    <div class="mb-6">
        <a href="{{ url_for('admin.budgets') }}" class="text-blue-600 hover:underline flex items-center">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Back to Budgets
        </a>
    </div>

    <div class="bg-white rounded-xl border p-6">
        <h1 class="text-xl font-bold text-gray-900 mb-6">Create Budget Alert</h1>

        <form method="POST" class="space-y-6">
            <!-- Name -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Alert Name
                </label>
                <input 
                    type="text" 
                    name="name" 
                    required
                    placeholder="e.g., Monthly Org Budget"
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
            </div>

            <!-- Scope -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Scope
                </label>
                <select 
                    name="user_id"
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
                    <option value="">Organization-wide (all users)</option>
                    {% for u in users %}
                    <option value="{{ u.id }}">{{ u.email }} ({{ u.name }})</option>
                    {% endfor %}
                </select>
                <p class="text-xs text-gray-500 mt-1">
                    Select a specific user or leave empty for org-wide monitoring
                </p>
            </div>

            <!-- Budget -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Monthly Budget (USD)
                </label>
                <div class="relative">
                    <span class="absolute left-3 top-2 text-gray-500">$</span>
                    <input 
                        type="number" 
                        name="budget" 
                        value="100"
                        min="1"
                        step="0.01"
                        required
                        class="w-full pl-7 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    >
                </div>
            </div>

            <!-- Threshold -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Alert Threshold (%)
                </label>
                <input 
                    type="number" 
                    name="threshold" 
                    value="80"
                    min="1"
                    max="100"
                    required
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
                <p class="text-xs text-gray-500 mt-1">
                    Alert when spending reaches this percentage of the budget
                </p>
            </div>

            <!-- Notification Email -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Notification Email
                </label>
                <input 
                    type="email" 
                    name="notify_email"
                    placeholder="admin@nonprofit.org"
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
                <p class="text-xs text-gray-500 mt-1">
                    Email to notify when alert triggers (optional)
                </p>
            </div>

            <!-- Submit -->
            <div class="flex justify-end space-x-3 pt-4">
                <a 
                    href="{{ url_for('admin.budgets') }}"
                    class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200"
                >
                    Cancel
                </a>
                <button 
                    type="submit"
                    class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
                >
                    Create Alert
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}
