{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "File Browser" %} - Eenos{% endblock %}
{% block extra_css %}
<style>
.file-manager-shell{position:relative;overflow:hidden;padding:0}
.file-manager-toolbar{padding:1rem 1.25rem;border-bottom:1px solid var(--eenos-border)}
.file-manager-frame{display:block;width:100%;height:calc(100vh - 285px);min-height:620px;border:0;background:var(--eenos-surface)}
.file-manager-loading{position:absolute;inset:73px 0 0;z-index:2;display:flex;align-items:center;justify-content:center;background:var(--eenos-surface);transition:opacity .2s ease,visibility .2s ease}
.file-manager-loading.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.file-manager-spinner{width:2rem;height:2rem;border:.2rem solid var(--eenos-border);border-top-color:var(--eenos-primary);border-radius:50%;animation:file-manager-spin .75s linear infinite}
@keyframes file-manager-spin{to{transform:rotate(360deg)}}
@media (max-width:767.98px){.file-manager-frame{height:calc(100vh - 250px);min-height:520px}.file-manager-loading{inset:65px 0 0}.file-manager-toolbar{padding:.875rem 1rem}}
</style>
{% endblock %}
{% block content %}
<div class="eenos-page-header flex-wrap gap-3">
    <div>
        <h1 class="eenos-page-title">{% translate "File Browser" %}</h1>
        <div class="eenos-page-subtitle">{% translate "Browse and manage the files in your hosting account." %}</div>
    </div>
    <div class="col-12 col-sm-auto">
        <a href="/eenos-fm/" target="_blank" rel="noopener noreferrer" class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100">
            <i data-lucide="external-link"></i><span>{% translate "Open in New Tab" %}</span>
        </a>
    </div>
</div>
<nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
    <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
    <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
    <span>{% translate "File Management" %}</span>
    <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
    <span class="eenos-breadcrumb-current" aria-current="page">{% translate "File Browser" %}</span>
</nav>
{% include "includes/form_alerts.html" %}
<div class="eenos-amber-notice eenos-amber-notice-warning mb-4" role="alert">
    <div class="eenos-amber-notice-icon" aria-hidden="true"><i data-lucide="triangle-alert"></i></div>
    <div class="eenos-amber-notice-content flex-grow-1">
        <div class="eenos-amber-notice-title">{% translate "Use File Studio to Manage Your Files" %}</div>
        <div class="eenos-amber-notice-text">{% translate "This File Browser is deprecated and is available only for compatibility. Please use File Studio to upload, edit, organize, and manage your account files. File Studio receives current features, security improvements, and ongoing updates." %}</div>
        <div class="mt-3">
            <a href="{% url 'workspace-filestudio' %}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-secondary d-inline-flex align-items-center gap-2">
                <i data-lucide="folder-open"></i><span>{% translate "Open File Studio" %}</span><i data-lucide="external-link"></i>
            </a>
        </div>
    </div>
</div>
<div class="eenos-card file-manager-shell">
    <div class="file-manager-toolbar d-flex align-items-center justify-content-between gap-3">
        <div class="d-flex align-items-center gap-3 min-w-0">
            <div class="eenos-card-action-icon flex-shrink-0"><i data-lucide="folder-search"></i></div>
            <div class="min-w-0">
                <h2 class="eenos-card-title mb-0">{% translate "Account Files" %}</h2>
                <div class="small text-muted d-none d-sm-block">{% translate "The file browser opens inside this secure panel." %}</div>
            </div>
        </div>
        <button type="button" class="btn btn-sm btn-outline-secondary flex-shrink-0" id="reloadFileManager" title="{% translate 'Reload File Browser' %}" aria-label="{% translate 'Reload File Browser' %}">
            <i data-lucide="refresh-cw"></i><span class="d-none d-sm-inline">{% translate "Reload" %}</span>
        </button>
    </div>
    <div class="file-manager-loading" id="fileManagerLoading" role="status" aria-live="polite">
        <div class="text-center">
            <div class="file-manager-spinner mx-auto mb-3" aria-hidden="true"></div>
            <div class="small fw-semibold">{% translate "Loading File Browser..." %}</div>
        </div>
    </div>
    <iframe id="FileManager" class="file-manager-frame" src="/eenos-fm/" title="{% translate 'File Browser' %}"></iframe>
</div>
{% endblock %}
{% block extra_js %}
<script>
(function($){"use strict";$(function(){
const frame=document.getElementById("FileManager"),loading=document.getElementById("fileManagerLoading");
function showLoading(){loading.classList.remove("is-hidden")}
function hideLoading(){loading.classList.add("is-hidden")}
frame.addEventListener("load",hideLoading);
$("#reloadFileManager").on("click",function(){showLoading();try{frame.contentWindow.location.reload()}catch(error){frame.src=frame.src}});
})})(jQuery);
</script>
{% endblock %}