{% extends 'school/base_school.html' %}

{% block title %}{% if is_edit %}Edit Teacher{% else %}Add Teacher{% endif %} | STD Lab{% endblock %}

{% block page_title %}{% if is_edit %}Edit Teacher{% else %}Add New Teacher{% endif %}{% endblock %}

{% block content %}
<div style="max-width: 800px; margin: 0 auto; background: #fff; padding: 30px; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 4px 6px rgba(0,0,0,0.05);">
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
            <div>
                <h4 style="font-size: 0.9rem; text-transform: uppercase; color: #10b981; margin-bottom: 20px; font-weight: 800; border-left: 4px solid #10b981; padding-left: 12px;">Basic Capabilities</h4>
                
                <div class="form-group">
                    <label>Full Name *</label>
                    <input type="text" name="name" value="{{ teacher.user.first_name|default:'' }}" required placeholder="e.g. Jane Doe">
                </div>

                <div class="form-group">
                    <label>Contact Number (Used for Login Username) *</label>
                    <input type="text" name="contact" value="{{ teacher.phone_number|default:'' }}" required placeholder="e.g. +88017xxxxxxxx">
                </div>

                <div class="form-group">
                    <label>Password {% if is_edit %}(Leave blank to keep current){% else %}*{% endif %}</label>
                    <input type="password" name="password" {% if not is_edit %}required{% endif %} placeholder="Enter password">
                </div>

                <div class="form-group">
                    <label>Date of Birth</label>
                    <input type="date" name="dob" value="{{ teacher.dob|date:'Y-m-d' }}">
                </div>
            </div>

            <div>
                <h4 style="font-size: 0.9rem; text-transform: uppercase; color: #3b82f6; margin-bottom: 20px; font-weight: 800; border-left: 4px solid #3b82f6; padding-left: 12px;">Identity & Qualifications</h4>

                <div class="form-group">
                    <label>National ID (NID)</label>
                    <input type="text" name="nid" value="{{ teacher.nid|default:'' }}" placeholder="e.g. 19901234567890">
                </div>

                <div class="form-group">
                    <label>Qualifications</label>
                    <input type="text" name="qualification" value="{{ teacher.qualification|default:'' }}" placeholder="e.g. BSc in Math, B.Ed">
                </div>

                <div class="form-group">
                    <label>Address</label>
                    <textarea name="address" rows="3" placeholder="Enter residential address">{{ teacher.address|default:'' }}</textarea>
                </div>
            </div>
        </div>

        <div style="display: flex; gap: 12px; margin-top: 32px; padding-top: 30px; border-top: 1px solid #f1f5f9;">
            <button type="submit" class="btn" style="flex: 1; justify-content: center; height: 50px; font-size: 1rem;">{% if is_edit %}UPDATE TEACHER RECORD{% else %}SAVE TEACHER RECORD{% endif %}</button>
            <a href="{% url 'teacher_list' %}" class="btn" style="flex: 1; justify-content: center; background-color: #f1f5f9; color: #475569; height: 50px; font-size: 1rem;">GO BACK</a>
        </div>
    </form>
</div>
{% endblock %}