{% 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">
                Teacher Info
            </div>

            <div class="row p-2 gy-2 g-md-2">
                <div class="col-12 col-md-4">
                    <div class="border d-flex justify-content-center">
                        {% if teacher.photo %}
                            <img src="{{ teacher.photo.url}}" height="200" alt="">
                        {% else %}
                            <img src="{% static 'images/no-image-man.jpeg' %}" height="200" alt="">
                        {% endif %}
                    </div>
                    <div class="d-flex flex-column  mt-2">
                        <div id="per_info" class="p-3 border mb-1 sms-teacher-info-btn sms-teacher-info-btn-active">Personal Information</div>
                        <div id="aca_qua" class="p-3 border mb-1 sms-teacher-info-btn">Academic Qualification</div>
                        <div id="about" class="p-3 border mb-1 sms-teacher-info-btn">About</div>
                    </div>
                </div>
                <div class="col-12 col-md-8">
                    <h3>{{ teacher.name }}</h3> <h6>{{ teacher.designation }} ({{ teacher.teaching_subject }})</h6>
                    <hr>
                    <div id="sms-teacher-info-details" class="p-3" style="min-height: 355px;">
                        <table class="table table-striped">
                            <tbody>
                                <tr>
                                    <td>Name</td>
                                    <td>{{ teacher.name }}</td>
                                </tr>
                                <tr>

                                    <td>Employee Id</td>
                                    <td>{{ teacher.employee_id }}</td>
                                </tr>
                                <tr>
                                    <td>Designation</td>
                                    <td>{{ teacher.designation }}</td>
                                </tr>
                                <tr>
                                    <td>Joining Date</td>
                                    <td>{{ teacher.joining_date }}</td>
                                </tr>
                                <tr>
                                    <td>Teaching Subject</td>
                                    <td>{{ teacher.teaching_subject }}</td>
                                </tr>
                                <tr>
                                    <td>Address</td>
                                    <td>{{ teacher.address }}</td>
                                </tr>
                                <tr>
                                    <td>Phone</td>
                                    <td>{{ teacher.phone }}</td>
                                </tr>
                                <tr>
                                    <td>Email</td>
                                    <td>{{ teacher.email }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
        </div>
        
    </div>
{% endblock content %}

{% block scripts %}
    <script>
        let teacher_id = "{{ teacher.id }}";
        let teacher_employee_id = "{{ teacher.employee_id }}";
        let teacher_name = "{{ teacher.name }}";
        let teacher_designation = "{{ teacher.designation }}";
        let teacher_teaching_subject = "{{ teacher.teaching_subject }}";
        let teacher_academic_qualification = "{{ teacher.academic_qualification|safe }}";
        let teacher_joining_date = "{{ teacher.joining_date }}";
        let teacher_about = "{{ teacher.about|safe }}";
        let teacher_phone = "{{ teacher.phone }}";
        let teacher_email = "{{ teacher.email }}";
        let teacher_address = "{{ teacher.address }}";
    </script>
    <script src="{% static 'js/teacher.js' %}"></script>
{% endblock scripts %}