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

{% block title %}Shared Folder - Retoor's Cloud Solutions{% endblock %}

{% block head %}
    <link rel="stylesheet" href="/static/css/components/file_browser.css">
{% endblock %}

{% block content %}
    <div class="container dashboard-container">
        <h1 class="page-title">Shared Folder</h1>

        <div class="file-list-table">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Last Modified</th>
                        <th>Size</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="file-list-body">
                    {% if files %}
                        {% for item in files %}
                        <tr data-path="{{ item.path }}" data-is-dir="{{ item.is_dir }}">
                            <td>
                                {% if item.is_dir %}
                                    <img src="/static/images/icon-families.svg" alt="Folder Icon" class="file-icon">
                                    <a href="/shared_file/{{ share_id }}?path={{ item.path }}">{{ item.name }}</a>
                                {% else %}
                                    <img src="/static/images/icon-professionals.svg" alt="File Icon" class="file-icon">
                                    {{ item.name }}
                                {% endif %}
                            </td>
                            <td>{{ item.last_modified[:10] }}</td>
                            <td>
                                {% if item.is_dir %}
                                    --
                                {% else %}
                                    {{ (item.size / 1024 / 1024)|round(2) }} MB
                                {% endif %}
                            </td>
                            <td>
                                <div class="action-buttons">
                                    {% if not item.is_dir %}
                                        <a href="/shared_file/{{ share_id }}/download?file_path={{ item.path }}" class="btn-small">⬇️</a>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="4" style="text-align: center; padding: 40px;">
                                <p>No files found in this shared directory.</p>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}