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

{% block title %}Teachers | STD Lab{% endblock %}

{% block page_title %}Teacher Management{% endblock %}

{% block content %}
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px;">
    <h3 style="margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--navy-800);">Institution Teachers</h3>
    <div style="display: flex; gap: 10px;">
        <form method="get" style="display: flex; gap: 10px;">
            <input type="text" name="q" placeholder="Search by name or contact..." value="{{ query|default:'' }}" style="padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px;">
            <button type="submit" class="btn" style="padding: 8px 15px; border-radius: 4px;">Search</button>
        </form>
        <a href="{% url 'teacher_add' %}" class="btn" style="background-color: #10b981; color: white; border-radius: 4px;">+ Add Teacher</a>
    </div>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;">
    {% for teacher in teachers %}
    <div style="background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;">
            <h4 style="margin: 0; font-size: 1.1rem; font-weight: 700; color: #1e293b;">
                {{ teacher.user.first_name }}
                {% if not teacher.user.is_active %}
                <span style="font-size: 0.7rem; background: #fee2e2; color: #ef4444; padding: 2px 6px; border-radius: 4px; vertical-align: middle;">Terminated</span>
                {% endif %}
            </h4>
        </div>
        
        <div style="font-size: 0.9rem; color: #475569; margin-bottom: 8px;">
            <i class="fas fa-phone" style="width: 20px; color: #94a3b8;"></i> {{ teacher.phone_number }}<br>
            <small style="color: #94a3b8; margin-left: 20px;">Username: {{ teacher.user.username }}</small>
        </div>
        <div style="font-size: 0.9rem; color: #475569; margin-bottom: 8px;">
            <i class="fas fa-id-card" style="width: 20px; color: #94a3b8;"></i> NID: {{ teacher.nid|default:"N/A" }}
        </div>
        <div style="font-size: 0.9rem; color: #475569; margin-bottom: 15px;">
            <i class="fas fa-graduation-cap" style="width: 20px; color: #94a3b8;"></i> {{ teacher.qualification|default:"No qualifications added" }}
        </div>
        
        <div style="display: flex; gap: 8px; border-top: 1px solid #f1f5f9; padding-top: 15px;">
            <a href="{% url 'teacher_edit' teacher.pk %}" class="btn" style="flex: 1; text-align: center; justify-content: center; padding: 8px; font-size: 0.85rem; background: #fff; color: var(--accent-green); border: 1.5px solid var(--accent-green); border-radius: 4px; box-shadow: none;">Edit</a>
            
            <a href="{% url 'teacher_terminate' teacher.pk %}" onclick="return confirm('Are you sure you want to {% if teacher.user.is_active %}terminate{% else %}reactivate{% endif %} this teacher?');" class="btn" style="flex: 1; text-align: center; justify-content: center; padding: 8px; font-size: 0.85rem; background: {% if teacher.user.is_active %}#fffbeb{% else %}#f0fdf4{% endif %}; color: {% if teacher.user.is_active %}#d97706{% else %}#16a34a{% endif %}; border: 1px solid {% if teacher.user.is_active %}#fde68a{% else %}#bbf7d0{% endif %}; border-radius: 4px;">
                {% if teacher.user.is_active %}Terminate{% else %}Reactivate{% endif %}
            </a>
            
            <a href="{% url 'teacher_delete' teacher.pk %}" onclick="return confirm('Are you sure you want to permanently delete this teacher record?');" class="btn" style="flex: 1; text-align: center; justify-content: center; padding: 8px; font-size: 0.85rem; background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; border-radius: 4px;">Delete</a>
        </div>
    </div>
    {% empty %}
    <div style="grid-column: 1 / -1; background: #fff; padding: 40px; text-align: center; border: 1px solid #e2e8f0; border-radius: 6px;">
        <h4 style="color: #64748b; margin-bottom: 10px;">
            {% if query %}
            No teachers found matching "{{ query }}".
            {% else %}
            No teachers added yet.
            {% endif %}
        </h4>
        {% if not query %}
        <a href="{% url 'teacher_add' %}" style="display: inline-block; background-color: #10b981; color: white; padding: 8px 20px; border-radius: 4px; text-decoration: none; font-weight: 600;">Click here to add</a>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% endblock %}