{% extends 'superuser/base_super_user.html' %}

{% block title %}{% if is_edit %}Edit Institution{% else %}Onboard Institution{% endif %} | Admin Panel{% endblock %}

{% block page_title %}{% if is_edit %}Edit Profile{% else %}Onboard New Institution{% endif %}{% endblock %}
{% block page_subtitle %}Configuration for partner institution access.{% endblock %}

{% block content %}
<div class="card" style="max-width: 600px;">
    <form method="post" style="display: flex; flex-direction: column; gap: 20px;">
        {% csrf_token %}
        
        {% if error %}<div class="alert alert-danger" style="background: #fee2e2; color: #ef4444; border: none; font-size: 0.75rem; text-transform: uppercase;">{{ error }}</div>{% endif %}

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
            <div class="form-group">
                <label style="font-size: 0.75rem; color: #94a3b8; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; display: block;">Institution Name</label>
                <input type="text" name="name" value="{{ school.name }}" required placeholder="e.g. Oxford Intl. School" style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; font-family: inherit; font-weight: 700;">
            </div>

            <div class="form-group">
                <label style="font-size: 0.75rem; color: #94a3b8; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; display: block;">Unique Code</label>
                <input type="text" name="code" value="{{ school.code }}" {% if is_edit %}readonly style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #f1f5f9; background: #f8fafc; color: #94a3b8; font-family: inherit; cursor: not-allowed;"{% else %}style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; font-family: inherit; font-weight: 700;"{% endif %} required placeholder="e.g. OIS001">
            </div>
        </div>

        <div style="background: #f8fafc; padding: 25px; border-radius: 12px; border: 1px solid #e2e8f0;">
            <h4 style="font-size: 0.7rem; color: #1e293b; font-weight: 900; text-transform: uppercase; margin-bottom: 20px;">Admin Access Credentials</h4>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                <div class="form-group">
                    <label style="font-size: 0.7rem; color: #94a3b8; font-weight: 850; text-transform: uppercase; margin-bottom: 8px; display: block;">Admin Username</label>
                    <input type="text" name="admin_username" value="{{ school.admin_username }}" {% if is_edit %}readonly style="width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #f1f5f9; background: #fff; color: #94a3b8; cursor: not-allowed;"{% else %}style="width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #e2e8f0; font-weight: 700;"{% endif %} required placeholder="e.g. principal">
                </div>

                <div class="form-group">
                    <label style="font-size: 0.7rem; color: #94a3b8; font-weight: 850; text-transform: uppercase; margin-bottom: 8px; display: block;">Admin Password</label>
                    <input type="password" name="password" {% if not is_edit %}required{% endif %} placeholder="****" style="width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #e2e8f0; font-weight: 700;">
                </div>
            </div>
            {% if is_edit %}<p style="font-size: 0.65rem; color: #94a3b8; margin-top: 15px; font-weight: 700;">Leave password blank to keep existing credential.</p>{% endif %}
        </div>

        <div class="form-group">
            <label style="font-size: 0.75rem; color: #94a3b8; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; display: block;">Physical Location Address</label>
            <textarea name="address" rows="2" style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; font-family: inherit; font-weight: 700; resize: none;" placeholder="Full address...">{{ school.address }}</textarea>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
            <div class="form-group">
                <label style="font-size: 0.75rem; color: #94a3b8; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; display: block;">Principal Contact (SMS)</label>
                <input type="text" name="contact_number" value="{{ school.contact_number|default:'' }}" placeholder="017XXXXXXXX" style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; font-family: inherit; font-weight: 700;">
            </div>
            <div class="form-group">
                <label style="font-size: 0.75rem; color: #94a3b8; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; display: block;">Monthly SMS Limit</label>
                <input type="number" name="announcement_limit" value="{{ school.monthly_announcement_limit|default:5 }}" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; font-family: inherit; font-weight: 700;">
            </div>
        </div>

        <div style="display: flex; gap: 15px; margin-top: 10px;">
            <button type="submit" class="btn btn-accent" style="flex: 1; padding: 15px; font-size: 0.9rem;">
                <i class="fas fa-save" style="margin-right: 8px;"></i> {% if is_edit %}UPDATE INSTITUTION{% else %}ONBOARD INSTITUTION{% endif %}
            </button>
            <a href="{% url 'super_school_list' %}" class="btn" style="flex: 0.4; padding: 15px; font-size: 0.9rem; background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; justify-content: center;">
                CANCEL
            </a>
        </div>
    </form>
</div>
{% endblock %}