{% extends '_modal.html' %}
{% load i18n %}

{% block modal_title %}Session: <small class="fs-5">{{ session.client }} - {{ session.date }}</small>
    <a href="{% url 'session_client:edit_session' session.uuid %}"
       hx-get="{% url 'session_client:edit_session' session.uuid %}"
       hx-target="#modal-body-wrapper"
       _="on htmx:afterOnLoad remove me"
       class="card-link small" style="font-size:.9rem;"><i class="bi bi-pencil-square"></i></a></small>{% endblock modal_title %}


    {% block modal_body %}

<div id="modal-body-wrapper">
{% partialdef modal-body-partial inline  %}

        <div class="card bg-dark mb-5 border border-secondary">
            <div class="card-body">

                <!--- Session Title -->
                <div class="container text-center">
                    <div class="row align-items-center">
                        <div class="col">
                            <small>{% translate 'Client' %}:</small>
                            <h5>{{ session.client }}</h5>
                        </div>
                        <div class="col">
                            <small>{% translate 'Date' %}:</small>
                            <h5>{{ session.date }} - {{ session.start_time|time:"H:i" }}</h5>
                        </div>
                    </div>
                </div>

                <!--- Session Brief -->
                <div class="container text-center border-top border-secondary">
                    <small>{% translate 'keywords' %}:</small>
                    <p>{{ session.keywords|linebreaksbr }}</p>
                </div>

                <!--- Session Attendance -->

                <div class="container text-center border-top border-secondary">
                    <div class="row align-items-center">
                        <div class="col">
                            <small>{% translate 'Attendance' %}:</small>
                            <h5>{{ session.get_attendance_display|default:"--" }}</h5>
                        </div>
                        <div class="col">
                            <small>{% translate 'Status' %}:</small>
                            <h5>{{ session.open|yesno:"Open,Closed" }}</h5>
                        </div>
                    </div>
                </div>

                <!--- Session Payment -->

                <div class="container text-center border-top border-secondary">
                    <div class="row align-items-center">
                        <div class="col">
                            <small>{% translate 'Payment' %}:</small>
                            <h5>{{ session.paid|yesno:"Paid,--" }}</h5>
                        </div>
                        <div class="col">
                            <small>{% translate 'Amount' %}:</small>
                            <h5> {{ session.fee|default:"--" }} </h5>
                        </div>
                    </div>
                </div>

            </div>
        </div>
{% endpartialdef %}
</div>
    {% endblock modal_body %}