<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Title -->
    <title>Updog3 - {{ directory }}</title>
    <!-- Stylesheets -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/fontawesome-5.1/css/all.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/datatable/datatables.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.min.css') }}">
</head>


<body>
<div class="conn">
    {% if download_folder and show_download_prompt %}
    <script>
        function downloadAndRedirect(downloadUrl, redirectUrl) {
            const anchor = document.createElement('a');
            anchor.href = downloadUrl;
            anchor.target = '_blank';
            anchor.download = ''; // Triggers the download
            anchor.click();
            // Redirect to the referrer URL after initiating the download
            window.location.href = redirectUrl;
        }
        function DownloadAsZipWithPrompt() {
            // Ask confirmation
            const confirmDownload = confirm("The folder size is {{ folder_size }} bytes ({{ folder_size_mb }} Mb). Do you want to download it as a ZIP file? Large folders will take time to compress");
            
            // If yes, download
            if (confirmDownload) {
                // Redirect to download the folder as ZIP
                // window.location.href = "{{ url_for('download_zip', path=displayed_directory) }}";
                downloadAndRedirect("{{ url_for('download_zip', path=displayed_directory) }}", "/{{displayed_directory}}"); // document.referrer)
            }
            else {
                window.location.href = "/{{displayed_directory}}";
            }
        }
        DownloadAsZipWithPrompt()
    </script>
    {% elif download_folder %}
    <script>
        function downloadAndRedirect(downloadUrl, redirectUrl) {
            const anchor = document.createElement('a');
            anchor.href = downloadUrl;
            anchor.target = '_blank';
            anchor.download = ''; // Triggers the download
            anchor.click();
            // Redirect to the referrer URL after initiating the download
            window.location.href = redirectUrl;
        }
        downloadAndRedirect("{{ url_for('download_zip', path=displayed_directory) }}", "/{{displayed_directory}}"); // document.referrer)
    </script>
    {% endif %}


    <!-- Header -->
    <header id="header" class="d-flex align_item_center">
        <div onclick="document.location='/'" class="logo_p">
            <img src="{{ url_for('static', filename='images/Updog3.png') }}" alt="updog3">
        </div>

        <div class="heading_title_p">
            <h2>Directory: {{ displayed_directory }}</h2>
            <h2>Uploads: {{ upload }}</h2>
        </div>
    </header>

    {% with messages = get_flashed_messages(with_categories=True) %}
    {% if messages %}
        <div class="flash-messages">
            {% for category, message in messages %}
                <div class="alert alert-{{ category }}">
                    {{ message }}
                    <button class="close-btn" onclick="this.parentElement.style.display='none';">&times;</button>
                </div>
            {% endfor %}
        </div>
    {% endif %}
    {% endwith %}

    {% if upload != 'disabled' %}
    <!-- ----- Upload Form ----- -->
    <div class="inputUploadP">
        <form method="post" action="/upload" enctype="multipart/form-data" class="uploadForm">
            <!-- -- Upload File -- -->
            <div class="uploadFile_P">
                <input type="file" name="file" id="file" class="uploadFile"
                       data-multiple-caption="{count} files selected" multiple/>
                <label for="file">
                    <i class="fa fa-upload"></i>
                    <span>Choose a file…</span>
                </label>
                <input type="hidden" name="path" value="{{ directory }}">
            </div>
            <!-- -- Upload Btn -- -->
            <p class="uploadBtn_P">
                <button type="submit" class="uploadBtn btn btn-primary">
                    Upload
                </button>
            </p>
        </form>
    </div>
    {% endif %}


    {% if createdir == True %}
    <!-- ----- Mkdir Form ----- -->
    <div class="inputUploadP">
        <form method="post" action="/createdir" enctype="multipart/form-data" class="uploadFile_P">
            <input type="text" class="uploadFile" placeholder="New folder name" id="dirname" name="dirname" style="border-radius: 5px; padding: 5px; border: 1px solid #ccc;"/>
            <input type="hidden" name="path" value="{{ directory }}">
            <input type="submit" class="uploadBtn btn btn-primary" value="Create Folder"></button>
        </form>
    </div>
    {% endif %}

    
    {% if upload != 'only' %}

        {% if is_subdirectory %}
        <section class="backBtn_p">
            <a href="/{{ back }}">
                <i class="fas fa-level-up-alt"></i>
                <span>Back</span>
            </a>
        </section>
        {% endif %}

        <!-- Table -->
        <section class="table_p table-responsive">
            <table id="tableData" class="table table-hover compact">
                <thead>
                <tr>
                    <th width="4%"><!--Type (Directory or File)--></th>
                    <th>Name</th>
                    <th>Size</th>
                    <th>Last Modified</th>
                    <th></th> <!-- Download as zip -->
                    <th></th> <!-- View file -->
                </tr>
                </thead>
                <tbody>
                {% for file in files %}
                <tr>
                    <td> <!-- Icon -->
                        {% if file.is_dir %}
                        <button class="file_ic"><i class="far fa-folder"></i></button><!-- Directory icon -->
                        {% else %}
                        <button class="file_ic"><i class="far fa-file"></i></button><!-- File icon -->
                        {% endif %}
                    </td>
                    <td> <!-- Name -->
                        <a href="/{{ file.rel_path }}">{{ file.name }}{% if file.is_dir %}/{% endif %}</a>
                    </td>
                    <td data-order="{{ file.size_sort }}"> <!-- File size -->
                        {{ file.size }}
                    </td>
                    <td data-order="{{ file.last_modified_sort }}"> <!-- File last modified -->
                        {{ file.last_modified }}
                    </td>
                    <td> <!-- View file -->
                        {% if file.is_dir %}
                        <a href="/{{ file.rel_path }}?downloadzip=1">Download as zip</a>
                        {% endif %}
                    </td>
                    <td> <!-- View file -->
                        {% if not file.is_dir %}
                        <a href="/{{ file.rel_path }}?view=1">View in browser</a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </section>
    {% else %}
        <section class="table_p table-responsive">
            <h2>Downloads not enabled</h2>
        </section>
    {% endif %}

    <footer>
        <p>
            updog3 {{ version }}
        </p>
    </footer>

</div> <!-- end class conn -->

<!-- Scripts -->
<script src="{{ url_for('static', filename='js/jquery-3.4.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/datatable/datatables.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>

</body>
</html>