{% include 'header.twig' %}

<!-- Custom CSS For Modern Update Cards -->
<style>
    .updates-wrapper { padding: 10px 0; }
    .update-box {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.04);
        border-left: 5px solid #6d47bb;
        padding: 20px;
        margin-bottom: 20px;
        transition: all 0.3s ease;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden; /* Yeh bahar nikalne se rokega */
    }
    .update-box:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    }
    .update-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 12px;
    }
    .update-title {
        font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
        margin: 0;
        margin-bottom: 12px;
        word-wrap: break-word;
        line-height: 1.4;
    }
    .update-id-badge {
        background: #6d47bb;
        color: #fff;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 13px;
        display: inline-block;
    }
    .update-date {
        font-size: 12.5px;
        color: #64748b;
        background: #f1f5f9;
        padding: 5px 12px;
        border-radius: 20px;
        font-weight: 500;
        display: inline-block;
        border: 1px solid #e2e8f0;
    }
    .update-body {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        padding: 15px;
        border-radius: 8px;
        color: #334155;
        font-size: 14.5px;
        line-height: 1.6;
        word-wrap: break-word;
        white-space: pre-line; /* Line breaks ko sahi dikhayega */
    }
    /* Dark mode support */
    .dark-mode .update-box { background: #1e1e1e; border-color: #8b5cf6; }
    .dark-mode .update-title { color: #f8fafc; }
    .dark-mode .update-date { background: #333; color: #cbd5e1; border-color: #444; }
    .dark-mode .update-body { background: #2d2d2d; border-color: #444; color: #e2e8f0; }
</style>

<!-- Main variables *content* -->
<div class="appContent">
    <section class="my-3">
        <!-- 🚨 YAHAN CONTAINER-FLUID ADD KIYA GAYA HAI 🚨 -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="updates-wrapper">

                        {% for order in orders %}
                        <div class="update-box">
                            <div class="update-header">
                                <span class="update-id-badge">ID: {{ order['service_id'] }}</span> 
                                <div class="update-date">
                                    <i class="fa fa-calendar text-muted" style="margin-right: 5px;"></i>{{ order['date'] }}
                                </div>
                            </div>
                            <h4 class="update-title">
                                {{ order['service_name'] }}
                            </h4>
                            <div class="update-body">
                                {{ order['description'] }}
                            </div>
                        </div>
                        {% endfor %}

                    </div>
                </div>
            </div>
        </div>
    </section>
    
    {% if pagination["count"] > 1 %}
    <section class="my-3">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="text-center">
                        <ul class="pagination justify-content-center">

                            {% if pagination["current"] != 1 %}
                            <li>
                                <a class="btn btn-actions" href="updates/{{ status }}/{{ pagination["previous"] }}{% if search %}?search={{ search }}{% endif %}" aria-label="Previous">
                                    <span aria-hidden="true">«</span>
                                </a>
                            </li>
                            {% endif %}

                            {% set r, l = 3, 3 %}

                            {% if pagination['current'] == 1 %}
                                {% set r = 7 %}
                            {% endif %}

                            {% if pagination['current'] == 2 %}
                                {% set r = 5 %}
                            {% endif %}

                            {% if pagination['current'] >= pagination['count'] %}
                                {% set l = 5 %}
                            {% endif %}

                            {% for page in 1..pagination["count"] %}
                                {% if page >= (pagination['current']-l) and page <= (pagination['current']+r) %}
                                    <li{% if page == pagination['current'] %} class="active" {%endif%}>
                                        <a class="btn btn-actions" href="updates/{{ status }}/{{ page }}{% if search %}?search={{ search }}{% endif %}">{{ page }}</a>
                                    </li>
                                {%endif%}
                            {% endfor %}

                            {% if pagination['current'] < pagination['count'] %}
                            <li>
                                <a class="btn btn-actions" href="updates/{{ status }}/{{ pagination['next'] }}{% if search %}?search={{ search }}{% endif %}" aria-label="Next">
                                    <span aria-hidden="true">»</span>
                                </a>
                            </li>
                            {% endif %}

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {% endif %}

</div>

<br><br><br><br><br>
{% include 'footer.twig' %}