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


{% block content %}
    <!-- section school-img -->
    <!-- <div class="w-100 my-5">
        <img src="school-img.jpeg" alt="" class="img-fluid rounded shadow">
    </div> -->

    <!-- section carousel -->
    <div class="row my-5">
        <div class="col-12 col-lg-9">
            <div id="carouselExampleSlidesOnly" class="carousel slide shadow" data-bs-ride="carousel">
                <div class="carousel-inner">
                    {% if carousel.photo_one %}
                        <div class="carousel-item active" data-bs-interval="3000">
                            <img src="{{ carousel.photo_one.url }}" class="d-block w-100 rounded sms-carousel-img" alt="...">
                        </div>
                    {% endif %}
                    {% if carousel.photo_two %}
                        <div class="carousel-item" data-bs-interval="3000">
                            <img src="{{ carousel.photo_two.url }}" class="d-block w-100 rounded sms-carousel-img" alt="...">
                        </div>
                    {% endif %}

                    {% if carousel.photo_three %}
                        <div class="carousel-item" data-bs-interval="3000">
                            <img src="{{ carousel.photo_three.url }}" class="d-block w-100 rounded sms-carousel-img" alt="...">
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3 gy-4 gy-lg-0">
            <div class="d-flex flex-column justify-content-center align-items-center rounded sms-headmaster-info w-100 h-100 sms-text-icon">
                {% if carousel.celebraion_image %}
                    <div>
                        <img src="{{ carousel.celebration_image.url }}" alt="" class="img-fluid rounded shadow">
                    </div>
                {% else %}
                    <div>
                        <img src="{% static 'images/mujib-year.jpeg' %}" alt="" class="img-fluid rounded shadow">
                    </div>
                {% endif %}
            </div>
        </div>
    </div>


    <!-- section brief-history -->
    <div class="row my-5">
        <div class="col-12 col-lg-9">
            <div class="card shadow">
                <div class="card-header text-center fw-bold fs-1 sms-bg-primary sms-text-icon">
                    Brief History
                </div>
                <div class="card-body" style="background-color: #f8fafd;">
                    <blockquote class="blockquote mb-0">
                        <p>{{ school_context.about|safe|truncatechars:700 }}</p>
                        <!-- <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> -->
                    </blockquote>
                    <a href="{% url 'school_management_main:about' %}" class="btn sms-btn-primary rounded-pill float-end m-2">See more</a>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3 gy-4 gy-lg-0">
            <div class="d-flex flex-column justify-content-between align-items-center shadow rounded sms-headmaster-info w-100 h-100 sms-text-icon">
                <h2 class="fw-bold text-center p-2 border rounded sms-bg-primary mb-2 w-100">Headmaster</h2>
                <div>
                    {% if headmaster.photo %}
                        <img src="{{ headmaster.photo.url }}" height="230px" alt="" class=" rounded shadow">
                    {% else %}
                        <img src="{% static 'images/no-image-man.jpeg' %}" height="230px" alt="" class=" rounded shadow">
                    {% endif %}
                </div>
                <h5 class="fw-bold text-center p-2 border rounded sms-bg-primary mt-2 w-100 mb-0">{{ headmaster.name }}</h5>
            </div>
        </div>
    </div>


    <!-- section noticies -->
    <div class="row my-5 container mx-auto shadow p-4 gy-4 rounded">
        <div class="col-12">
            <h2 class="text-center fw-bold">Important Notices</h2>
        </div>
        {% for notice in notices %}
            <div class="col-3 d-flex flex-row justify-content-center p-3 sms-notice-date-div">
                <div class="text-center d-flex flex-column justify-content-center align-items-center w-25">
                    <span class="fw-bold fs-5 sms-notice-date">{{ notice.updated_at.day }}</span>
                    <span class="fw-bold fs-5 sms-notice-date">{{ notice.updated_at.month|month_name }}</span>
                </div>
            </div>
            <div class="col-6 d-flex flex-row justify-content-start align-items-center sms-notice-text-div">
                <span class="fs-5 sms-notice-text">{{ notice.name }}</span>
            </div>
            <div class="col-3 d-flex flex-row justify-content-center align-items-center sms-notice-download-div">
                <span class="fs-5 sms-notice-text"><a href="{{ notice.file.url }}" class="nav-link" download><i class="bi bi-download"></i></a></span>
            </div>
        {% endfor %}
        <!-- <div class="col-3 d-flex flex-row justify-content-center  p-3 sms-notice-date-div">
            <div class="text-center d-flex flex-column justify-content-center align-items-center w-25">
                <span class="fw-bold fs-5 sms-notice-date">5</span>
                <span class="fw-bold fs-5 sms-notice-date">Jan</span>
            </div>
        </div>
        <div class="col-9 d-flex flex-row justify-content-start align-items-center  sms-notice-text-div">
            <span class="fs-5 sms-notice-text">২০২৩ সালের উচ্চ মাধ্যমিক সার্টিফিকেট পরীক্ষার ফরম পূরণ সংক্রান্ত বিজ্ঞপ্তি</span>
        </div>

        <div class="col-3 d-flex flex-row justify-content-center p-3 sms-notice-date-div">
            <div class="text-center d-flex flex-column justify-content-center align-items-center w-25">
                <span class="fw-bold fs-5 sms-notice-date">5</span>
                <span class="fw-bold fs-5 sms-notice-date">Jan</span>
            </div>
        </div>
        <div class="col-9 d-flex flex-row justify-content-start align-items-center sms-notice-text-div">
            <span class="fs-5 sms-notice-text">২০২৩ সালের উচ্চ মাধ্যমিক সার্টিফিকেট পরীক্ষার ফরম পূরণ সংক্রান্ত বিজ্ঞপ্তি</span>
        </div> -->

        <div class="col-12">
            <a href="{% url 'school_management_main:notices' %}" class="btn btn-lg sms-btn-primary rounded-pill float-end m-2">See All Notices</a>
        </div>
    </div>


    <!-- section Important Links -->
    <div class="shadow rounded container my-5 p-0 p-sm-2">
        <h2 class="text-center fw-bold mb-5">Important Links</h2>

        <div class="rounded p-3">
            <div class="d-flex flex-row justify-content-around align-items-center">
                <a href="{% url 'school_management_main:syllabus' %}" class="text-decoration-none sms-imp-links">Syllabus</a>
                <a href="{% url 'school_management_main:routines' %}" class="text-decoration-none sms-imp-links">Routine</a>
                <a href="#" class="text-decoration-none sms-imp-links">Result</a>
            </div>
        </div>
    </div>


    <!-- section contact -->
    <div class="shadow rounded container my-5 p-4">
        <h2 class="text-center fw-bold my-5">Contact Us</h2>
        <div class="d-flex flex-column flex-md-row justify-content-around align-items-center mb-5">
            <div class="sms-contact-infos">
                {% if school_context.address %}
                    <div class="sms-contact-info"><i class="bi bi-geo-alt-fill"></i> {{ school_context.address }}</div>
                {% endif %}
                {% if school_context.contact_no %}
                    <div class="sms-contact-info"><i class="bi bi-phone"></i> {{ school_context.contact_no }}</div>
                {% endif %}
                {% if school_context.email %}
                    <div class="sms-contact-info"><i class="bi bi-envelope"></i> {{ school_context.email }}</div>
                {% endif %}
                {% if school_context.website %}
                    <div class="sms-contact-info"><i class="bi bi-globe2"></i> {{ school_context.website }}</div>
                {% endif %}
            </div>
            <div class="sms-map">
                <!-- <img class="img-fluid rounded" src="map.png" alt=""> -->
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3621.461417882853!2d88.9380633762069!3d24.813889347117993!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39fc7cacdb9089e1%3A0x9e62fa24306d399c!2z4Kao4KaT4KaX4Ka-4KaBIOCmnOCmv-CmsuCmviDgprjgp43gppXgp4HgprI!5e0!3m2!1sbn!2sbd!4v1695225674397!5m2!1sbn!2sbd" width="500" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>

    </div>
{% endblock content %}