{% extends '_base.html' %}
{% load static i18n %}
{% block background %}bg-secondary{% endblock %}


{% block hero_block %}
    <div class="position-relative flex-container mb-5 bg-secondary" style="height:40vh;">
        <div class="col-12 col-md-8" style="max-width: 10rem;">
            <span class="text-light position-relative"
                      style="font-size:35cqmin;font-family:'Love Light',cursive;z-index: 98;"
                >Dreamy
            </span>

            <span class="fs-2 text-primary position-absolute start-50 bottom-0" style="z-index: 99;"
            >{% translate 'Admin for therapists -Beta' %}</span>
        </div>
    </div>

<div class="py-4 mb-5 position-relative bg-primary text-secondary" style="height: 38vh;width: 100vw;">

<div class="row">

    <div class="col ps-1 ps-md-5">
    <ul class="">
        <li class="nav-link">
        <a href="{% url 'session_client:client_list' %}"
           class="link-secondary
           link-underline link-underline-opacity-0 display-2">{% translate 'Clients' %}</a>
        </li>
        <li class="nav-link">
        <a href="{% url 'session_client:session_list' %}"
           class="link-secondary
           link-underline link-underline-opacity-0 display-2">{% translate 'Sessions' %}</a>
        </li>
        <li class="nav-link">
        <a href="{% url 'room_calendar_app:room_calendar_list' %}"
           class="link-secondary
           link-underline link-underline-opacity-0 display-2">{% translate 'Rooms' %}</a>
        </li>
    </ul> <!-- Links -->
    </div>

    <div class="col text-secondary">
        <div class="position-absolute top-50 end-0 m-4">

        <p class="fs-5">{% translate 'Therapists handle a lot of complexity' %}</p>
        <p class="fs-5">{% translate "Let's make it a bit easier to handle their admin" %}</p>
        </div>
    </div> <!-- entry text -->
</div>
</div>

{% endblock %}

{% block content %}
    <h1 class="text-primary display-1 fw-bold">{% translate "Features" %}</h1>

    <!-- Client card display -->
    <section class="my-5 p-2">
    <h2 class="text-primary border-bottom">{% translate "Client Card" %}</h2>
    <p class="text-primary fs-3"
        >{% translate "Will give you a quick glance of a client's admin situation" %}</p>
    <div class="row">

        {% include 'base/client-card.html' %}

    <!-- Card explained -->
        {% include 'base/client-card-intro.html' %}
    </div>
    </section>

    <!-- Sessions Management -->
    <section class="my-5">
    <h2 class="text-primary border-bottom">{% translate "Session's list" %}</h2>
    <p class="text-primary fs-3"
    >{% translate "Quickly handle the management of your sessions once it is time for it." %}</p>

{% include 'base/session-intro.html' %}

    </section>

    <!-- Rooms -->
    <section class="my-5">
        <h2 class="text-primary border-bottom">{% translate "Rooms management" %}</h2>
            <p class="text-primary fs-3">
                {% translate "Rooms can be quickly seen, shared and managed." %}
            </p>
    {% include 'base/room-info.html' %}

    </section>


<!-- Calendar -->
    <section class="my-5">
        <h2 class="text-primary border-bottom">{% translate "Calendar View" %}</h2>
            <p class="text-primary fs-3">
                {% translate "See your sessions by room and date, while in sync with your colleagues." %}
            </p>

    {% include 'base/cal-info.html' %}
    </section>

{% endblock content %}

{% block extra_js %}
    <!-- GSap -->
{% if splash %}
    <script type="module" src="{% static 'js/splash.js' %}"></script>
{% endif %}
{% endblock %}