{% extends "base.html" %}
{% block title %}{{ folder.name }} | {{ app_name }}{% endblock %}
{% block content %}
    <section class="content-grid two-column">
        <article class="panel">
            <div class="panel-header panel-header-inline">
                <div>
                    <h1>{{ folder.name }}</h1>
                    <p>{{ folder.description or ltext('No description available. / لا يوجد وصف.') }}</p>
                </div>
                {% if user_can('manage_folders') %}
                    <a class="button button-secondary" href="{{ url_for('files.edit_folder', folder_id=folder.id) }}">{{ ltext('Edit Folder / تعديل المجلد') }}</a>
                {% endif %}
            </div>
            <div class="detail-grid">
                <article class="detail-card"><span>{{ ltext('Visibility / الظهور') }}</span><strong>{{ folder.visibility.value|ltext }}</strong></article>
                <article class="detail-card"><span>{{ ltext('Company / الشركة') }}</span><strong>{{ folder.company.name if folder.company else t('internal') }}</strong></article>
                <article class="detail-card"><span>{{ ltext('Department / القسم') }}</span><strong>{{ folder.department.name if folder.department else t('unassigned') }}</strong></article>
                <article class="detail-card"><span>{{ ltext('Files / الملفات') }}</span><strong>{{ files|length }}</strong></article>
            </div>
            <div class="table-wrap">
                <table class="data-table">
                    <thead>
                    <tr>
                        <th>{{ ltext('Name / الاسم') }}</th>
                        <th>{{ ltext('Size / الحجم') }}</th>
                        <th>{{ ltext('Uploaded / تاريخ الرفع') }}</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for file in files %}
                        <tr>
                            <td>{{ file.original_name }}</td>
                            <td>{{ file.size_bytes|filesize }}</td>
                            <td>{{ file.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                            <td class="actions-cell">
                                <a href="{{ url_for('files.download', file_id=file.id) }}">{{ t('open') }}</a>
                                {% if user_can('delete_files') %}
                                    <form method="post" action="{{ url_for('files.delete', file_id=file.id) }}">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                        <input type="hidden" name="next" value="{{ request.path }}">
                                        <button type="submit" class="link-button">{{ ltext('Delete / حذف') }}</button>
                                    </form>
                                {% endif %}
                            </td>
                        </tr>
                    {% else %}
                        <tr><td colspan="4">{{ ltext('No files uploaded. / لا توجد ملفات.') }}</td></tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </article>
        <div class="stack-column">
            {% if user_can('upload_files') %}
                <article class="panel">
                    <div class="panel-header">
                        <h2>{{ ltext('Upload Files / رفع ملفات') }}</h2>
                    </div>
                    <form method="post" action="{{ url_for('files.upload_to_folder', folder_id=folder.id) }}" enctype="multipart/form-data" class="form-grid" data-upload-form>
                        {{ upload_form.hidden_tag() }}
                        <label>{{ upload_form.description.label }} {{ upload_form.description(class="input") }}</label>
                        <label class="checkbox-row">{{ upload_form.customer_visible() }} <span>{{ ltext('Visible to external customer users / ظاهر لعملاء الخارج') }}</span></label>
                        <label>{{ upload_form.files.label }} {{ upload_form.files(class="input") }}</label>
                        <div class="upload-progress" data-upload-progress hidden>
                            <div class="upload-progress-bar" data-upload-progress-bar></div>
                        </div>
                        {{ upload_form.submit(class="button") }}
                    </form>
                </article>
            {% endif %}
            {% if user_can('manage_folders') %}
                <article class="panel">
                    <div class="panel-header">
                        <h2>{{ ltext('Access Rules / قواعد الوصول') }}</h2>
                    </div>
                    <form method="post" action="{{ url_for('files.add_folder_permission', folder_id=folder.id) }}" class="form-grid">
                        {{ permission_form.hidden_tag() }}
                        <label>{{ permission_form.subject_ref.label }} {{ permission_form.subject_ref(class="input") }}</label>
                        <label class="checkbox-row">{{ permission_form.can_view() }} <span>{{ ltext('Can view / يمكنه العرض') }}</span></label>
                        <label class="checkbox-row">{{ permission_form.can_upload() }} <span>{{ ltext('Can upload / يمكنه الرفع') }}</span></label>
                        <label class="checkbox-row">{{ permission_form.can_delete() }} <span>{{ ltext('Can delete / يمكنه الحذف') }}</span></label>
                        {{ permission_form.submit(class="button") }}
                    </form>
                    <ul class="list-stack compact-list">
                        {% for permission in folder.permissions.all() %}
                            <li>{{ permission.subject_type|ltext }} #{{ permission.subject_id }} - {{ ltext('view / عرض') }}: {{ permission.can_view }}, {{ ltext('upload / رفع') }}: {{ permission.can_upload }}, {{ ltext('delete / حذف') }}: {{ permission.can_delete }}</li>
                        {% else %}
                            <li>{{ ltext('No explicit folder permissions defined. / لا توجد صلاحيات مخصصة.') }}</li>
                        {% endfor %}
                    </ul>
                </article>
            {% endif %}
        </div>
    </section>
{% endblock %}