Sindbad~EG File Manager

{% extends 'users/layout_participate.html' %} {% block title %} Sessions {% endblock %} {% block content %}
<div class="container">
    <h3>Dashboard</h3>
    <hr width="15%" class="line" />
    <br />
    <div class="row">
        <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 form-group">
            <div class="row">
                <div class="col-xl-5 col-sm-12 pb-4">
                    <div class="card" id="selected_card">
                        <div class="card-body">
                            <div class="row">
                                <h5 id="Selected_text">Completed Session</h5>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    Sessions
                                </div>
                                <div class="col-6 d-flex justify-content-end">
                                    {{ completed_session.session_count }}
                                </div>
                            </div>
                            <!-- <hr class="line" />
                            <div class="text-center">
                                <a href="#"> View </a>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="card" id="active_card">
                <div class="card-body">
                    <div class="row">
                        <h5 id="incomplete_text">Active Session</h5>
                        {% if active_sessions %}
                        {% for i in active_sessions %}
                        <div class="col-12">
                            <table class="table table-success p-3">
                                <tr class="align-content-center">
                                    <th scope="row" class="table-active text-center" width="10%">{{ i.startdate.strftime('%d  %b')|upper }}</th>
                                    <td colspan="2"><h5>{{ i.session_name }}</h5></td>
                                    <td width="10%"><a href="{{ url_for('user.question',session_id=i.session_id) }}" class="btn btn-outline-success rounded-pill">Start</a></td>
                                </tr>
                            </table>
                        </div>
                        {% endfor %}
                        {% else %}
                        <div class="col-12">
                            <h2 class="text-danger">No Active session</h2>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="card mt-4" id="selected_card">
                <div class="card-body">
                    <div class="row">
                        <h5 id="incomplete_text">Upcoming Session</h5>
                        {% if upcoming_session %}
                        {% for i in upcoming_session %}
                        <div class="col-12">
                            <table class="table table-success p-3">
                                <tr class="align-content-center">
                                    <th scope="row" class="table-active text-center" width="10%">{{ i.startdate.strftime('%d  %b')|upper }}</th>
                                    <td colspan="2"><h5>{{ i.session_name }}</h5></td>
                                    <td width="10%"><button type="button" class="btn btn-outline-success rounded-pill">Soon</button></td>
                                </tr>
                            </table>
                        </div>
                        {% endfor %}
                        {% else %}
                        <div class="col-12 text-center">
                            <h2 class="text-danger">No Upcoming sessions</h2>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
            <div class="card bg-warning">
                <div class="card-body">
                    <h4>Instruction</h4>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis quam at nisi bibendum, id feugiat urna feugiat. Donec tempor ultricies eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Curabitur mattis quam at nisi bibendum, id feugiat urna feugiat. Donec tempor ultricies eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis quam at nisi bibendum, id feugiat urna feugiat.
                    Donec tempor ultricies eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis quam at nisi bibendum, id feugiat urna feugiat. Donec tempor ultricies eleifend. Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit. Curabitur mattis quam at nisi bibendum, id feugiat urna feugiat. Donec tempor ultricies eleifend.
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}