{% extends "base.html" %}
{% block title %}{% trans %}Shared Files{% endtrans %}{% endblock %}
{% block head %}{{ super() }}
<meta name="robots" content="noindex, nofollow">
{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto px-4 sm:px-6 py-12">

{% if expired %}
    <!-- Expired / one-time used card -->
    <div class="text-center py-16">
        <div class="w-16 h-16 rounded-2xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mx-auto mb-6">
            <i class="fa fa-link-slash text-2xl text-gray-400 dark:text-gray-500"></i>
        </div>
        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
            {% if one_time_used %}{% trans %}This link has already been used{% endtrans %}{% else %}{% trans %}This link has expired{% endtrans %}{% endif %}
        </h2>
        <p class="text-gray-500 dark:text-gray-400 mb-6">
            {% if one_time_used %}
                {% trans %}This was a one-time link and has already been accessed.{% endtrans %}
            {% else %}
                {% trans %}The share link you followed is no longer valid.{% endtrans %}
            {% endif %}
        </p>
        <a href="{{ url('/') }}" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 font-medium transition-all">
            <i class="fa fa-house"></i> {% trans %}Go Home{% endtrans %}
        </a>
    </div>

{% elif needs_password %}
    <!-- Password prompt -->
    <div class="rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden shadow-sm">
        <div class="px-6 py-5 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-primary/5 to-secondary/5 dark:from-primary-light/5 dark:to-secondary-light/5">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-primary/10 dark:bg-primary-light/10 flex items-center justify-center flex-shrink-0">
                    <i class="fa fa-lock text-primary dark:text-primary-light"></i>
                </div>
                <div>
                    <h2 class="font-bold text-gray-900 dark:text-white">{% trans %}Password Protected{% endtrans %}</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        <strong>{{ sharer }}</strong> {% trans %}shared files with you. Enter the password to access them.{% endtrans %}
                    </p>
                </div>
            </div>
        </div>
        <form method="POST" class="p-6 space-y-4">
            {% if password_error %}
            <div class="flex items-center gap-2 px-4 py-3 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 text-sm text-red-700 dark:text-red-300">
                <i class="fa fa-circle-exclamation flex-shrink-0"></i> {{ password_error }}
            </div>
            {% endif %}
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Password{% endtrans %}</label>
                <input type="password" name="password" autofocus required
                    class="w-full px-4 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"
                    placeholder="{% trans %}Enter password{% endtrans %}">
            </div>
            <button type="submit" class="w-full inline-flex items-center justify-center gap-2 px-6 py-2.5 rounded-xl bg-primary hover:bg-primary/90 text-white font-semibold transition-all">
                <i class="fa fa-unlock"></i> {% trans %}Access Files{% endtrans %}
            </button>
        </form>
    </div>

{% else %}
    <!-- File list -->
    <div class="mb-6">
        <div class="flex items-center gap-3 mb-1">
            <i class="fa fa-share-nodes text-primary dark:text-primary-light text-lg"></i>
            <h2 class="text-xl font-bold text-gray-900 dark:text-white">{% trans %}Shared Files{% endtrans %}</h2>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400">
            <strong>{{ sharer }}</strong> {% trans %}shared these converted files with you.{% endtrans %}
            {% if expires_at %}
            <span class="ml-2 inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 text-xs font-medium">
                <i class="fa fa-clock"></i> {% trans %}Expires{% endtrans %} {{ expires_at }}
            </span>
            {% endif %}
        </p>
    </div>

    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden shadow-sm">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center gap-2">
            <i class="fa fa-file-arrow-down text-gray-400 dark:text-gray-500"></i>
            <h3 class="font-semibold text-gray-900 dark:text-white text-sm">
                {% trans %}Files{% endtrans %} ({{ file_urls|length }})
            </h3>
        </div>

        {% if file_urls %}
            {% for file_url in file_urls %}
            <div class="flex items-center gap-4 px-6 py-3 border-b border-gray-50 dark:border-gray-800/50 last:border-0 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                <i class="fa fa-file text-gray-400 dark:text-gray-500 flex-shrink-0"></i>
                <span class="flex-1 text-sm text-gray-700 dark:text-gray-300 truncate">
                    {{ file_url | basename | splitpart(0, '?') if file_url | basename else file_url }}
                </span>
                <a href="{{ static_url(file_url) if not file_url.startswith('http') else file_url }}"
                   class="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-lg bg-accent hover:bg-accent-dark text-white text-sm font-medium transition-all flex-shrink-0" download>
                    <i class="fa fa-download text-xs"></i> {% trans %}Download{% endtrans %}
                </a>
            </div>
            {% endfor %}
        {% else %}
            <div class="px-6 py-8 text-center text-sm text-gray-400 dark:text-gray-500">
                <i class="fa fa-folder-open text-2xl mb-2 block"></i>
                {% trans %}No files available{% endtrans %}
            </div>
        {% endif %}
    </div>

    <div class="mt-6 text-center">
        <a href="{{ url('/') }}" class="text-sm text-primary dark:text-primary-light hover:underline">
            <i class="fa fa-arrow-left mr-1 text-xs"></i> {% trans %}Convert your own files for free{% endtrans %}
        </a>
    </div>
{% endif %}

</div>
{% endblock %}