{% extends "documents/base_documents.html" %}
{% load i18n static short_name %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'common/select2.min.css' %}" />
    <link rel="stylesheet" href="{% static 'common/select2-bootstrap-5-theme.min.css' %}" />
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h2 class="mb-0">{% blocktranslate %}Sharing – {{ folder.name }}{% endblocktranslate %}</h2>
            <p class="text-muted mb-0">{% translate "Manage who can access this folder." %}</p>
        </div>
        <div>
            <a class="btn btn-outline-secondary" href="{% url 'documents:list' %}?folder={{ folder.slug }}">
                <i class="bi bi-arrow-left"></i> {% translate "Back to folder" %}
            </a>
        </div>
    </div>

    {% if breadcrumbs %}
        <nav aria-label="{% translate 'Breadcrumb' %}" class="mb-4">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{% url 'documents:list' %}">{% translate "Document Management" %}</a></li>
                {% for crumb in breadcrumbs %}
                    <li class="breadcrumb-item {% if forloop.last %}active{% endif %}">
                        {% if forloop.last %}
                            {{ crumb.name }}
                        {% else %}
                            <a href="{% url 'documents:list' %}?folder={{ crumb.slug }}">{{ crumb.name }}</a>
                        {% endif %}
                    </li>
                {% endfor %}
            </ol>
        </nav>
    {% endif %}

    <div class="row g-4">
        <div class="col-lg-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">{% translate "Share with users" %}</h5>
                </div>
                <div class="card-body">
                    <form method="post" action="{% url 'documents:folder_share_add' folder.pk %}">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label class="form-label" for="{{ share_form.users.id_for_label }}">{% translate "Users" %}</label>
                            {{ share_form.users }}
                            {% if share_form.users.errors %}
                                <div class="invalid-feedback d-block">{{ share_form.users.errors|join:', ' }}</div>
                            {% endif %}
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="{{ share_form.permission.id_for_label }}">{% translate "Permission" %}</label>
                            {{ share_form.permission }}
                            {% if share_form.permission.errors %}
                                <div class="invalid-feedback d-block">{{ share_form.permission.errors|join:', ' }}</div>
                            {% endif %}
                        </div>
                        <button type="submit" class="btn btn-primary">{% translate "Share" %}</button>
                    </form>
                    <hr>
                    <h6>{% translate "Existing shares" %}</h6>
                    {% if shares %}
                        <ul class="list-group list-group-flush">
                            {% for share in shares %}
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <span>{{ share.user|user_display }} – {{ share.get_permission_display }}</span>
                                    <form method="post" action="{% url 'documents:folder_share_delete' folder.pk share.pk %}" class="ms-2">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-sm btn-outline-danger">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="text-muted mb-0">{% translate "No users have access." %}</p>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">{% translate "Shareable links" %}</h5>
                </div>
                <div class="card-body">
                    <form method="post" action="{% url 'documents:folder_access_link' folder.pk %}">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label class="form-label" for="{{ access_link_form.permission.id_for_label }}">{% translate "Permission" %}</label>
                            {{ access_link_form.permission }}
                            {% if access_link_form.permission.errors %}
                                <div class="invalid-feedback d-block">{{ access_link_form.permission.errors|join:', ' }}</div>
                            {% endif %}
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="{{ access_link_form.expires_at.id_for_label }}">{% translate "Expiration" %}</label>
                            {{ access_link_form.expires_at }}
                            {% if access_link_form.expires_at.errors %}
                                <div class="invalid-feedback d-block">{{ access_link_form.expires_at.errors|join:', ' }}</div>
                            {% endif %}
                        </div>
                        <button type="submit" class="btn btn-primary">{% translate "Create link" %}</button>
                    </form>
                    <hr>
                    <h6>{% translate "Active links" %}</h6>
                    {% if access_links %}
                        <div class="list-group list-group-flush">
                            {% for link in access_links %}
                                <div class="list-group-item">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <div class="fw-semibold">{{ link.get_permission_display }}</div>
                                            <small class="text-muted">{% translate "Created on" %} {{ link.created_at|date:"SHORT_DATETIME_FORMAT" }}</small>
                                            {% if link.expires_at %}
                                                <div><small class="text-muted">{% translate "Expires" %} {{ link.expires_at|date:"SHORT_DATETIME_FORMAT" }}</small></div>
                                            {% endif %}
                                            <div class="mt-1">
                                                {% url 'documents:folder_public' link.token as public_url %}
                                                <code>{{ request.scheme }}://{{ request.get_host }}{{ public_url }}</code>
                                            </div>
                                        </div>
                                        <form method="post" action="{% url 'documents:folder_access_link_delete' folder.pk link.pk %}">
                                            {% csrf_token %}
                                            <button type="submit" class="btn btn-sm btn-outline-danger">
                                                <i class="bi bi-x-circle"></i>
                                            </button>
                                        </form>
                                    </div>
                                    <div class="mt-2">
                                        <a href="{% url 'documents:folder_public' link.token %}" target="_blank" rel="noopener" class="small">
                                            <i class="bi bi-box-arrow-up-right"></i> {% translate "Open public link" %}
                                        </a>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="text-muted mb-0">{% translate "No active links." %}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block script %}
    {{ block.super }}
    <script src="{% static 'common/select2.min.js' %}"></script>
    <script>
    $(document).ready(function() {
        if ($('#id_folder_share_users').length) {
            $('#id_folder_share_users').select2({
                theme: 'bootstrap-5',
                placeholder: "{% translate 'Rechercher et sélectionner des utilisateurs...' %}",
                allowClear: true,
                width: '100%'
            });
        }
    });
    </script>
{% endblock %}