{% load humanize %}
{% load i18n %}

<div class="row px-3 py-3 d-flex align-items-center justify-content-between rounded"
        {% if show_object.type == type %}
            {% if show_object.id == share.user.id or show_object.id == share.group.id %}
     data-obj-fade="true"
     data-obj-id="{{ show_object.id }}"
     data-obj-type="{{ show_object.type }}"
            {% endif %}
        {% endif %}
>
    {% if type == 'user' %}
        <div class="col-1 col-md-auto">
            {% if request.user.is_superuser %}
                <a class="d-flex text-decoration-none"
                   href="{% url 'accounts.user-detail' username=share.user.username %}">
                    {% include "accounts/_avatar.html" with user=share.user %}
                </a>
            {% else %}
                {% include "accounts/_avatar.html" with user=share.user %}
            {% endif %}
        </div>
        <div class="col-3">
            <div class="row">
                <b>{{ share.user.get_full_name }}</b>
            </div>
            <div class="row">
                <span class="text-muted small">@{{ share.user.username }}</span>
            </div>
        </div>
    {% elif type == 'group' %}
        <div class="col-4 col-md-2">
            <div class="row text-break">
                <span class="ps-0 fw-semibold">{{ share.group.name }}</span>
            </div>
            <div class="row d-inline-block">
                <span class="badge text-bg-info">{{ share.group.user_set.count }} {% translate "users" %}</span>
            </div>
        </div>
        <div class="d-none d-md-block col-2 align-items-center">
            <div class="row justify-content-between">
                <div class="col-12 g-0">
                    {% for user in share.group.user_set.all|dictsort:'username' %}
                        {% if forloop.counter <= 14 %}
                            {% if forloop.counter > 8 %}
                                {% include "accounts/_avatar.html" with user=user classes="d-lg-inline d-none avatar-sm" tooltip_title=user.username %}
                            {% else %}
                                {% include "accounts/_avatar.html" with user=user classes="d-lg-inline avatar-sm" tooltip_title=user.username %}
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
            {% with share.group.user_set.count|add:"-12" as diff %}
                {% if diff > 0 %}
                    <div class="row justify-content-center justify-content-lg-start">
                        <div class="col-6 g-0">
                            <span class="badge text-bg-secondary mt-2" data-bs-toggle="tooltip">
                                + {{ diff }} {% translate "more" %}
                            </span>
                        </div>
                    </div>
                {% endif %}
            {% endwith %}
        </div>
    {% endif %}

    <div class="col-3 col-lg-4 text-center">
        {% if share.grant_description %}
            <span {% if share.grant_description|length > 80 %}
                title="{{ share.grant_description }}" data-bs-toggle="tooltip"
                data-bs-placement="top"{% endif %}>
                {{ share.grant_description|truncatechars:80 }}
            </span>
        {% endif %}
    </div>
    <div class="col-3 d-flex justify-content-center">
        <div data-bs-placement="top" data-bs-toggle="tooltip"
             title="{{ share.granted_until|date:"Y-m-d H:i:s e" }}"
             class="badge text-bg-{{ share.expiry_icon }}">
            {% if share.is_expired %}
                {% comment %}
                 This should only rarely be true, since all expired shares *should* be cleaned up immediately
                {% endcomment %}
                <span class="d-block d-lg-inline mb-1">{% translate "Expired since" %}</span>
                {{ share.granted_until|timesince }}
            {% elif share.granted_until %}
                <span class="d-block d-lg-inline mb-1">{% translate "Expires in" %}</span>
                {{ share.granted_until|timeuntil }}
            {% else %}
                {% translate "Permanent" %}
            {% endif %}
        </div>
    </div>
    <div class="col-1 d-flex gap-3 g-0 align-items-center justify-content-end">
        {% translate "Unknown" as unknown %}
        {% blocktranslate asvar share_meta with granted_by=share.granted_by|default_if_none:unknown granted_on=share.granted_on|date:"Y-m-d H:i:s e" %}
            Granted by: {{ granted_by }} <br>
            on {{ granted_on }}
        {% endblocktranslate %}
        <i class="fa fa-info-circle fa-2x text-muted-bright opacity-75"
           title="{{ share_meta }}"
           data-bs-toggle="tooltip"
           data-bs-placement="top"></i>

        {% if shareable %}
            <i class="fa fa-times-circle fa-2x text-danger" data-bs-toggle="dropdown" data-bs-auto-close="outside"
               aria-expanded="false" style="cursor: pointer">
            </i>
            <div class="dropdown-menu px-5 text-center bg-danger-subtle">
                <div class="mb-2">
                    {% translate "Are you sure you want to revoke their access to this secret?" %}
                </div>
                <button class="btn btn-danger" type="button"
                        hx-delete="{% url 'secrets.secret-share-delete' hashid=secret.hashid share_id=share.id %}">
                    {% translate "Yes, revoke access." %}
                </button>
            </div>
        {% endif %}
    </div>
</div>
