{% load i18n %}
{% include 'filter_tags.html' %}

<style>
    .oh-scrollable-container {
        overflow-x: auto;
        white-space: nowrap;
    }

    .oh-layout--grid-3 {
        display: inline-block;
    }

    .oh-kanban-card {
        display: inline-block;
        margin-right: 15px;
        width:auto;
        border-radius:15px;
    }
</style>


<div class="oh-scrollable-container oh-wrapper mb-3">
    <div class="oh-layout--grid-3 mt-2 mb-2">
        {% for user_leave in user_leaves %}
        <div class="oh-kanban-card" id="requestCreateCard" data-toggle="oh-modal-toggle" data-target="#objectCreateModal"
            hx-get="{% url 'user-request' user_leave.leave_type_id.id %}" hx-target="#objectCreateModalTarget">
            <div class="oh-kanban-card__avatar">
                <div class="oh-kanban-card__profile-container">
                    <img src="{{user_leave.leave_type_id.get_avatar }}" class="oh-kanban-card__profile-image"
                        alt="Leave Icon" />
                </div>
            </div>
            <div class="oh-kanban-card__details mt-2">
                <span class="oh-kanban-card__title">{{user_leave.leave_type_id|truncatechars:20}}</span>
                <span class="oh-kanban-card__subtitle">{% trans "Available Leave Days" %} : {% if user_leave.leave_type_id.limit_leave %}{{user_leave.available_days}} {% else %}{% trans "No Limit" %}{% endif %}</span><br>
                <span class="oh-kanban-card__subtitle">{% trans "Carryforward Leave Days" %} :
                    {{user_leave.carryforward_days}}</span><br>
                <span class="oh-kanban-card__subtitle">{% trans "Total Leave Days" %} : {% if user_leave.leave_type_id.limit_leave %}{{user_leave.total_leave_days}}{% else %}{% trans "No Limit" %}{% endif %}</span><br>
                <span class="oh-kanban-card__subtitle">{% trans "Total Leave taken" %} :{{user_leave.leave_taken}}</span>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
