{% extends "exams/base_public.html" %}
{% load static %}

{% block content %}



<div class="container-fluid py-4">
<main class="container-fluid px-0">


<!-- HERO BAR -->
<section class="hero-bar mb-0">

  <div class="hero-bar-inner">
    <!-- LEFT COAT -->
    <img src="{% static 'assets/img/coat.png' %}" class="hero-coat-bar left">
 
    <!-- CENTER TEXT -->
    <div class="hero-bar-text">

      <h1>
        {% if site_settings.site_title %}
            {{ site_settings.site_title }}
        {% endif %}
      </h1>

      <h1>
        {% if site_settings.site_name %}
            {{ site_settings.site_name }}
        {% endif %}
      </h1>
      <p>Quality Education • Digital Systems • Transparency</p>
    </div>

    <!-- RIGHT COAT -->
    <img src="{% static 'assets/img/coat.png' %}" class="hero-coat-bar right">

  </div>
</section>
















<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white text-center">
                    <h4 class="mb-0">Available Examination Results</h4>
                </div>
                
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        {% for project in projects %}
                            <div class="list-group-item d-flex justify-content-between align-items-center p-3">
                                <div>
                                    <h5 class="mb-1">
                                        <strong >{{ project.name }}</strong>
                                        <span class="badge bg-warning ms-2">{{ project.year }}</span>
                                    </h5>

                                    {% if project.description %}
                                        <p class="text-muted small mb-0 mt-1">{{ project.description|truncatechars:100 }}</p>
                                    {% endif %}
                                </div>
                                <a href="{% url 'exams:public_project_schools' project.project_code %}"
                                   class="btn btn-outline-primary rounded-pill">
                                    <i class="fas fa-eye me-1"></i> View Results
                                </a>
                            </div>
                        {% empty %}
                            <div class="list-group-item text-center py-5">
                                <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                                <p class="text-muted mb-0">No active projects available at the moment.</p>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                
                {% if projects %}
                <div class="card-footer text-muted text-center small">
                    <i class="fas fa-info-circle"></i> Click on any project to view participating schools and their results
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<style>
    .list-group-item {
        transition: all 0.2s ease;
    }
    .list-group-item:hover {
        background-color: #f8f9fa;
        transform: translateX(5px);
    }
    .btn-outline-primary:hover {
        transform: scale(1.02);
    }
    .badge {
        font-weight: normal;
    }
</style>















<!-- ================= FOOTER ================= -->
<footer class="ega-footer">

  <div class="container-lg px-3">
    <div class="row pt-5">

<!-- CONTACT -->
<div class="col-12 col-md-3 footer-content">
    <h6 class="footer-heading">Wasiliana Nasi</h6>
    <div class="circuit-line"><span></span><span></span></div>

    {% if site_setting.contact_email %}
        <p class="mb-1"><strong>Barua pepe:</strong> {{ site_setting.contact_email }}</p>
    {% else %}
        <p class="mb-1"><strong>Barua pepe:</strong> jacksonsilass@gmail.com</p>
    {% endif %}
    
    {% if site_setting.contact_phone %}
        <p class="mb-1"><strong>Simu:</strong> {{ site_setting.contact_phone }}</p>
    {% else %}
        <p class="mb-1"><strong>Simu:</strong> +255 763169695</p>
    {% endif %}
    
    {% if site_setting.contact_address %}
        <p class="mb-1"><strong>Anuani:</strong> {{ site_setting.contact_address|truncatechars:60 }}</p>
    {% endif %}
    
</div>

      <!-- PARTNERS -->
      <div class="col-12 col-md-3 footer-content">
        <h6 class="footer-heading">Kuhusu sisi:</h6>
        <div class="circuit-line"><span></span><span></span></div>

    {% if site_setting.site_description %}
        <p class="mb-1"> {{ site_setting.site_description|truncatechars:150 }}</p>
    {% endif %}



      </div>


      <!-- QUICK LINKS -->
      <div class="col-12 col-md-3 footer-content">
        <h6 class="footer-heading">Tovuti Mashuhuri</h6>
        <div class="circuit-line"><span></span><span></span></div>

        <a href="https://www.necta.go.tz/" target="_blank">NECTA</a>
        <a href="https://ess.utumishi.go.tz/" target="_blank">ESS</a>
        <a href="https://www.pmo.go.tz/" target="_blank">Ofisi ya Waziri Mkuu</a>
        <a href="https://www.utumishi.go.tz/" target="_blank">OR-UTUMISHI</a>
      </div>



<!-- ONLINE SERVICES -->
<div class="col-12 col-md-3 footer-content">
    <h6 class="footer-heading">Huduma Mtandao</h6>
    <div class="circuit-line"><span></span><span></span></div>

    <a href="{% url 'exams:login' %}">Login-Mfumo huu wa  Matokeo</a>

    <!-- Social Media Links -->
    {% with site=site_setting|default:site_settings %}
        {% if site.facebook_url or site.twitter_url or site.instagram_url or site.youtube_url %}
            <div class="social-links mt-3">
                {% if site.facebook_url %}
                    <a href="{{ site.facebook_url }}" target="_blank" class="me-2"><i class="fab fa-facebook-f"></i> Facebook</a>
                {% endif %}
                {% if site.twitter_url %}
                    <a href="{{ site.twitter_url }}" target="_blank" class="me-2"><i class="fab fa-twitter"></i> X/Twitter</a>
                {% endif %}
                {% if site.instagram_url %}
                    <a href="{{ site.instagram_url }}" target="_blank" class="me-2"><i class="fab fa-instagram"></i> Instagram</a>
                {% endif %}
                {% if site.youtube_url %}
                    <a href="{{ site.youtube_url }}" target="_blank" class="me-2"><i class="fab fa-youtube"></i> Youtube</a>
                {% endif %}
                {% if site.whatsapp_url %}
                    <a href="{{ site.whatsapp_url }}" target="_blank" class="me-2"><i class="fab fa-whatsapp"></i></a>
                {% endif %}
            </div>
        {% endif %}
    {% endwith %}
</div>

    </div>

    <hr class="footer-divider">

    <!-- BOTTOM BAR -->
    <div class="row py-4 align-items-center">
      <div class="col-md-6 text-center text-md-start footer-small">
        © 2026 Header Tech. — Haki Zote Zimehifadhiwa
      </div>

      <div class="col-md-6 text-center text-md-end footer-social">
        <a href="#"><i class="bi bi-facebook"></i></a>
        <a href="#"><i class="bi bi-twitter-x"></i></a>
        <a href="#"><i class="bi bi-youtube"></i></a>
      </div>
    </div>
  </div>

</footer>



















{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'site/css/home.css' %}">
{% endblock %}

{% block extra_js %}
<script src="{% static 'site/js/home.js' %}"></script>
<!-- <script src="{% static 'adminlte/plugins/jquery/bootstrap.bundle.min.js' %}"></script> -->
<script src="{% static 'adminlte/plugins/jquery/bootstrap.bundle.min.js' %}"></script>
{% endblock %}