{% extends "layouts/base.html" %}

{% block title %}Shared Folder - {{ item_path }}{% endblock %}

{% block head %}
    <style>
        .share-container {
            max-width: 1200px;
            margin: 4rem auto;
            padding: 2rem;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .share-header {
            border-bottom: 1px solid #eee;
            padding-bottom: 1.5rem;
            margin-bottom: 1.5rem;
        }
        .permission-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            background: #e3f2fd;
            color: #1976d2;
            border-radius: 12px;
            font-size: 0.875rem;
            margin-left: 1rem;
        }
        .file-list-table {
            width: 100%;
        }
        .file-list-table table {
            width: 100%;
            border-collapse: collapse;
        }
        .file-list-table th {
            background: #f5f5f5;
            padding: 1rem;
            text-align: left;
            font-weight: 600;
        }
        .file-list-table td {
            padding: 1rem;
            border-top: 1px solid #eee;
        }
        .file-icon {
            width: 20px;
            height: 20px;
            margin-right: 0.5rem;
            vertical-align: middle;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="share-container">
        <div class="share-header">
            <h1>
                {{ item_path.split('/')[-1] if item_path else 'Shared Folder' }}
                <span class="permission-badge">{{ permission }}</span>
            </h1>
            <p>{{ item_path }}</p>
        </div>

        <div class="file-list-table">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Last Modified</th>
                        <th>Size</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% if files %}
                        {% for item in files %}
                        <tr>
                            <td>
                                {% if item.is_dir %}
                                    <img src="/static/images/icon-families.svg" alt="Folder Icon" class="file-icon">
                                    {{ item.name }}
                                {% else %}
                                    <img src="/static/images/icon-professionals.svg" alt="File Icon" class="file-icon">
                                    {{ item.name }}
                                {% endif %}
                            </td>
                            <td>{{ item.last_modified[:10] if item.last_modified else '' }}</td>
                            <td>
                                {% if item.is_dir %}
                                    --
                                {% else %}
                                    {{ (item.size / 1024 / 1024)|round(2) }} MB
                                {% endif %}
                            </td>
                            <td>
                                {% if not item.is_dir and not disable_download %}
                                    <a href="/share/{{ share_id }}/download?file_path={{ item.path }}" class="btn-small">Download</a>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="4" style="text-align: center; padding: 2rem; color: #999;">
                                This folder is empty
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}