{#
Project: EPT-MX-ADM
Company: EasyProTech LLC (www.easypro.tech)
Dev: Brabus
Date: Thu 23 Oct 2025 22:41:32 UTC
Status: Created
Telegram: https://t.me/EasyProTech
#}

{% extends "base.html" %}

{% block title %}{{ user_id }} Media - {{ t('app.name') }}{% endblock %}

{% block content %}
<div class="fade-in-up">
    <!-- Header -->
    <div class="header-section mb-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h2 text-gradient mb-0">
                <i class="bi bi-file-earmark-play me-2"></i>User Media
            </h1>
            <div class="header-actions">
                <a href="{{ url_for('media.export_user_media', user_id=user_id) }}" class="btn btn-success me-2">
                    <i class="bi bi-download me-1"></i>Export CSV
                </a>
                <a href="{{ url_for('media.users_media') }}" class="btn btn-outline-primary">
                    <i class="bi bi-arrow-left me-1"></i>Back to list
                </a>
            </div>
        </div>
        
        <!-- User info and filters card -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="row align-items-center mb-3">
                    <div class="col-auto">
                        <div class="user-avatar me-3">
                            <div class="avatar-circle">
                                <i class="bi bi-person-fill"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <h3 class="mb-1">{{ user_display_name or user_id }}</h3>
                        <p class="text-muted mb-2">{{ user_id }}</p>
                        <div class="d-flex gap-4">
                            <div>
                                <div class="text-muted small">Total storage</div>
                                <div class="fw-bold">
                                    <i class="bi bi-hdd me-1"></i>
                                    {{ media_data.total_size_formatted or '0 B' }}
                                </div>
                            </div>
                            <div>
                                <div class="text-muted small">Total files</div>
                                <div class="fw-bold">
                                    <i class="bi bi-file-earmark-play me-1"></i>
                                    {{ media_data.total_count or 0 }}
                                </div>
                            </div>
                            <div>
                                <div class="text-muted small">On this page</div>
                                <div class="fw-bold text-primary">
                                    <i class="bi bi-eye me-1"></i>
                                    {{ media_data.files_on_page or 0 }} files / {{ media_data.size_on_page_formatted or '0 B' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <hr class="my-3">
                
                <!-- Filters row -->
                <div class="row g-3 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label">File type</label>
                        <select class="form-select" id="fileTypeFilter">
                            <option value="">All types</option>
                            <option value="image">Images</option>
                            <option value="video">Videos</option>
                            <option value="audio">Audio</option>
                            <option value="document">Documents</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Status</label>
                        <select class="form-select" id="statusFilter">
                            <option value="">All statuses</option>
                            <option value="normal">Normal</option>
                            <option value="quarantined">Quarantined</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Rows per page</label>
                        <select class="form-select" id="limitFilter" onchange="applyFilters()">
                            <option value="25" {{ 'selected' if limit == 25 else '' }}>25</option>
                            <option value="50" {{ 'selected' if limit == 50 else '' }}>50</option>
                            <option value="100" {{ 'selected' if limit == 100 else '' }}>100</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary w-100" onclick="applyFilters()">
                            <i class="bi bi-funnel me-1"></i>Apply
                        </button>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-outline-secondary w-100" onclick="clearFilters()">
                            <i class="bi bi-x-circle me-1"></i>Clear
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Media files list -->
    {% if media_data.media %}
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span>
                <i class="bi bi-file-earmark-play me-2"></i>
                Media files <span class="badge bg-primary ms-2">{{ media_data.total_count or media_data.media|length }}</span>
            </span>
        </div>
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>Media ID</th>
                        <th>Type</th>
                        <th>File Name</th>
                        <th>Size</th>
                        <th>Created</th>
                        <th>Last Access</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for media in media_data.media %}
                    <tr>
                        <td>
                            <code class="small">{{ media.media_id }}</code>
                        </td>
                        <td>
                            {% if media.file_type %}
                                {% if media.file_type == 'image' %}
                                <span class="badge bg-success">Image</span>
                                {% elif media.file_type == 'video' %}
                                <span class="badge bg-primary">Video</span>
                                {% elif media.file_type == 'audio' %}
                                <span class="badge bg-warning">Audio</span>
                                {% elif media.file_type == 'document' %}
                                <span class="badge bg-info">Document</span>
                                {% else %}
                                <span class="badge bg-secondary">Other</span>
                                {% endif %}
                            {% else %}
                                <span class="badge bg-secondary">Unknown</span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="text-truncate d-inline-block" style="max-width: 200px;" title="{{ media.upload_name or '-' }}">
                                {{ media.upload_name or '-' }}
                            </span>
                        </td>
                        <td>{{ media.file_size_formatted or '0 B' }}</td>
                        <td>
                            {% if media.created_ts %}
                                {{ media.created_ts | datetime_format }}
                            {% else %}
                                Unknown
                            {% endif %}
                        </td>
                        <td>
                            {% if media.last_access_ts %}
                                {{ media.last_access_ts | datetime_format }}
                            {% else %}
                                Never
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                {% if media.is_quarantined %}
                                <span class="badge bg-danger me-1">Quarantined</span>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-icon">
            <i class="bi bi-file-earmark-play"></i>
        </div>
        <h5>No media files found</h5>
        <p>This user has no media files yet.</p>
    </div>
    {% endif %}

    <!-- Pagination -->
    {% if total > 0 %}
    <div class="d-flex justify-content-between align-items-center mt-4">
        <div class="pagination-text">
            {{ t('pagination.showing') }} 
            {{ ((current_page - 1) * limit + 1) if total > 0 else 0 }} - 
            {{ (current_page * limit) if (current_page * limit) < total else total }} 
            {{ t('pagination.of') }} {{ total }} {{ t('pagination.entries') }}
        </div>
        
        {% if total_pages > 1 %}
        <nav aria-label="User media pagination">
            <ul class="pagination mb-0">
                {% if current_page > 1 %}
                <li class="page-item">
                    <a class="page-link" href="#" onclick="goToPage(1)">
                        <i class="bi bi-chevron-double-left"></i>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#" onclick="goToPagePrev()">
                        <i class="bi bi-chevron-left"></i>
                    </a>
                </li>
                {% endif %}
                
                {% set start_page = [1, current_page - 2] | max %}
                {% set end_page = [total_pages, current_page + 2] | min %}
                
                {% if start_page > 1 %}
                <li class="page-item disabled">
                    <span class="page-link">...</span>
                </li>
                {% endif %}
                
                {% for page_num in range(start_page, end_page + 1) %}
                <li class="page-item {% if page_num == current_page %}active{% endif %}">
                    <a class="page-link" href="#" onclick="goToPage('{{ page_num }}')">
                        {{ page_num }}
                    </a>
                </li>
                {% endfor %}
                
                {% if end_page < total_pages %}
                <li class="page-item disabled">
                    <span class="page-link">...</span>
                </li>
                {% endif %}
                
                {% if current_page < total_pages %}
                <li class="page-item">
                    <a class="page-link" href="#" onclick="goToPageNext()">
                        <i class="bi bi-chevron-right"></i>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#" onclick="goToPageLast()">
                        <i class="bi bi-chevron-double-right"></i>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
// Pagination functions
function goToPage(page) {
    const url = new URL(window.location);
    url.searchParams.set('page', parseInt(page));
    window.location.href = url.toString();
}

function goToPagePrev() {
    const currentPage = parseInt(new URLSearchParams(window.location.search).get('page')) || 1;
    if (currentPage > 1) {
        goToPage(currentPage - 1);
    }
}

function goToPageNext() {
    const currentPage = parseInt(new URLSearchParams(window.location.search).get('page')) || 1;
    const totalPages = parseInt('{{ total_pages }}');
    if (currentPage < totalPages) {
        goToPage(currentPage + 1);
    }
}

function goToPageLast() {
    const totalPages = parseInt('{{ total_pages }}');
    goToPage(totalPages);
}

// Export
function exportUserMedia() {
    window.location.href = '{{ url_for("media.export_user_media", user_id=user_id) }}';
}

// Filters
function applyFilters() {
    const fileType = document.getElementById('fileTypeFilter').value;
    const status = document.getElementById('statusFilter').value;
    const limit = document.getElementById('limitFilter').value;
    
    const url = new URL(window.location);
    url.searchParams.set('page', '1'); // Reset to first page
    
    if (fileType) {
        url.searchParams.set('file_type', fileType);
    } else {
        url.searchParams.delete('file_type');
    }
    
    if (status) {
        url.searchParams.set('quarantine', status);
    } else {
        url.searchParams.delete('quarantine');
    }
    
    if (limit) {
        url.searchParams.set('limit', limit);
    }
    
    window.location.href = url.toString();
}

function clearFilters() {
    const url = new URL(window.location);
    url.searchParams.delete('file_type');
    url.searchParams.delete('quarantine');
    url.searchParams.set('page', '1');
    url.searchParams.set('limit', '25'); // Reset to default
    window.location.href = url.toString();
}

// Restore filter values from URL on page load
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    
    const fileType = urlParams.get('file_type');
    if (fileType) {
        document.getElementById('fileTypeFilter').value = fileType;
    }
    
    const quarantine = urlParams.get('quarantine');
    if (quarantine) {
        document.getElementById('statusFilter').value = quarantine;
    }
    
    const limit = urlParams.get('limit');
    if (limit) {
        document.getElementById('limitFilter').value = limit;
    }
});
</script>
{% endblock %}