{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block title %}File Manager{% endblock title  %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'admin/css/changelists.css' %}">
{% endblock extrastyle %}

{% block breadcrumbs %}
    <div class="breadcrumbs">
        <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
         &rsaquo;
        <a href="{% url 's3_files' %}?path=media/">File Manager</a>
         &rsaquo;
        {% for crumb in breadcrumbs %}
            {% if forloop.last %}
                {{ crumb.name }}
            {% elif forloop.first %}
                <a href="?path={{ crumb.path|urlencode }}">{{ crumb.name }}</a>
            {% else %}
                <a href="?path={{ crumb.path|urlencode }}">{{ crumb.name }}</a>
            {% endif %}
            {% if not forloop.last %} &rsaquo; {% endif %}
        {% endfor %}
    </div>
{% endblock %}

{% block content %}
    <div id="content-main">

        <!-- Upload -->
        <div class="module">
            <h2 class="module-title">{% trans "Upload" %}</h2>
            <div id="toolbar">
                <div class="search-tools">
                    <form method="POST" enctype="multipart/form-data" class="upload-form styled-form">
                        {% csrf_token %}
                        <div class="actions">
                            <input type="file" name="upload" class="input-file" required>
                            <button type="submit" class="button" title="Upload">{% trans 'Upload' %}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="module">
            <h2 class="module-title">{% trans "Search" %}</h2>
            <div id="toolbar">
                <div class="search-tools">
                    <form id="changelist-search" method="get">
                        <div>
                            <label for="searchbar"><img src="/static/admin/img/search.svg" alt="Search"></label>

                            <input type="hidden" name="path" value="{{ current_path }}">

                            <input type="text" name="search" size="40"
                                   placeholder="{% trans 'Search files and folders' %}"
                                   value="{{ search_query }}">
                            <input type="submit" value="{% trans 'Search' %}">
                            <span class="small quiet">
                                {% blocktranslate count counter=result_count %}
                                    {{ counter }} result{% plural %}{{ counter }} results
                                {% endblocktranslate %} (<a href="?">{% translate "Show all" %}</a>)</span>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- File Browser -->
        <div class="change-list">
            <table id="result_list">
                <thead>
                <tr>
                    <th scope="col" class="column-header">{% trans 'Type' %}</th>
                    <th scope="col" class="column-header"></th>
                    <th scope="col" class="column-header">{% trans 'Name' %}</th>
                    <th scope="col" class="column-header">{% trans 'Size' %}</th>
                    <th scope="col" class="column-header">{% trans 'Date' %}</th>
                    <th scope="col" class="column-header"></th>
                    <th scope="col" class="column-header"></th>
                </tr>
                </thead>
                <tbody>
                {% for item in items %}
                    <tr class="{% cycle 'row1' 'row2' %}">
                        <td>
                            {% if item.type == 'directory' %}
                                <i>{% trans "Folder" %}</i>
                            {% else %}
                                {{ item.type|title }}
                            {% endif %}
                        </td>
                        <td>
                            {% if item.type == 'image' %}
                                <img src="{{ item.url }}" alt="View Image" width="60" loading="lazy">
                            {% endif %}
                        </td>
                        <td>
                            {% if item.type == "directory" %}
                                <a href="?path={{ item.path|urlencode }}">{{ item.name }}/</a>
                            {% else %}
                                <a href="{{ item.url }}" download="">{{ item.name }}</a>
                            {% endif %}
                        </td>
                        <td>
                            {% if item.type != 'directory' %}
                                {{ item.size|filesizeformat }}
                            {% endif %}
                        </td>
                        <td>
                            {% if item.type != 'directory' %}
                                {{ item.last_modified|date:"M d, Y" }}
                            {% endif %}
                        </td>
                        <td>
                            {% if item.type != 'directory' %}
                                <a href="{{ item.url }}" target="_blank" class="button-link">{% trans "Download" %}</a>
                            {% endif %}
                        </td>
                        <td>
                            {% if item.type != 'directory' %}
                                <a href="{% url 'delete_s3_file' item.path %}"
                                   class="deletelink">{% trans "Delete" %}</a>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock content %}

{% block extrahead %}
    {{ block.super }}
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function () {
            // File deletion confirmation
            document.querySelectorAll('.deletelink').forEach(function (deleteButton) {
                const filePath = deleteButton.getAttribute('href');
                deleteButton.addEventListener('click', function (e) {
                    e.preventDefault();
                    if (confirm("{% trans 'Are you sure you want to delete this file?' %}")) {
                        fetch(filePath, {
                            method: 'POST',
                            headers: {
                                'X-CSRFToken': "{{ csrf_token }}",
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                file_path: filePath
                            })
                        })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    location.href = location.href;
                                } else {
                                    alert(data.error);
                                }
                            })
                            .catch(error => {
                                alert(error);
                            });
                    }
                });
            });
        });
    </script>
{% endblock extrahead %}