{% extends 'school_management_main/base.html' %}
{% load static %}


{% block content %}
    <div class="container my-5">
        <!-- section headmaster -->
        <div class="card shadow mt-5">
            <div class="card-header text-center fw-bold fs-1 sms-bg-primary sms-text-icon mb-5">
                Teachers
            </div>
            <h3 class="text-center fw-bold mb-3">Headmaster</h3>
            <div class="col-12 mb-5">
                <div class="d-flex justify-content-center align-items-center">
                    <div class="card" style="width: 18rem;">
                        {% if headmaster.photo %}
                            <img src="{{ headmaster.photo.url }}" height="230px" class="card-img-top" alt="No headmaster yet">
                        {% else %}
                            <img src="{% static 'images/no-image-man.jpeg' %}" height="230px" class="card-img-top" alt="Headmaster">
                        {% endif %}
                        <div class="card-body text-center sms-teacher-card-info">
                            {% if headmaster %}
                                <a href="{% url 'school_management_main:teacher' headmaster.id %}">{{ headmaster.name }}</a>
                            {% endif %}

                            <br>
                            {{ headmaster.designation }} ({{ headmaster.teaching_subject }})
                        </div>
                    </div>
                </div>
            </div>
            <h3 class="text-center fw-bold my-3">Other teachers</h3>
            <div class="row p-2">
                {% for teacher in teachers %}
                    <div class="col-12 col-lg-3 col-md-4 col-sm-6 mb-5">
                        <div class="d-flex justify-content-center align-items-center">
                            <div class="card" style="width: 18rem;">
                                {% if teacher.photo %}
                                    <img src="{{ teacher.photo.url }}" height="230px" class="card-img-top" alt="...">
                                {% else %}
                                    <img src="{% static 'images/no-image-man.jpeg' %}" height="230px" class="card-img-top" alt="...">
                                {% endif %}
                                <div class="card-body text-center sms-teacher-card-info">
                                    {% if teacher %}
                                        <a href="{% url 'school_management_main:teacher' teacher.id %}">{{ teacher.name }}</a>
                                    {% endif %}
                                    <br>
                                    {{ teacher.designation }} ({{ teacher.teaching_subject }})
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        
    </div>
{% endblock content %}