{% extends phone_or_desktop %}
{% load my_filters %}
{% block title %}RustDesk WebUI{% endblock %}
{% block legend_name %}{{ "Client Downloads" | translate }}{% endblock %}
{% load static %}
{% block content %}
<script src="{% static 'js/sorttable.js' %}"></script>
<style>
    .container {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: repeat(2, auto); /* Adjust the number of rows as needed */
    padding: 20px; /* Adjust the padding value as needed */
    max-width: 1000px; /* Set a maximum width for the container */
    margin: 0 auto; /* Center the container horizontally */
    }
    .section {
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 20px;
        margin-left: 10px;
        margin-right: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
        border-radius: 5px; /* Add rounded corners for a more 3D effect */
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
    // Place your globalSearch function or any DOM-related JS here
    window.globalSearch = function() {
        var input, filter, tables, tr, td, txtValue;
        input = document.getElementById("globalSearchInput");
        filter = input.value.toUpperCase();
        tables = document.getElementsByTagName("table");

        for (let table of tables) {
            tr = table.getElementsByTagName("tr");
            for (let i = 1; i < tr.length; i++) {
                let row = tr[i];
                let cells = row.getElementsByTagName("td");
                let textContent = Array.from(cells).map(cell => cell.textContent.toUpperCase());
                row.style.display = textContent.some(text => text.includes(filter)) ? "" : "none";
            }
        }
    }
});
</script>
<input type="text" id="globalSearchInput" onkeyup="globalSearch()" placeholder="Search all fields..." style="width: 200px; height: 20px; margin-bottom: 10px;">
<a href="/api/generator">Client Generator</a>
<div class="container">
    <div class="section">
        <h1>Github Clients</h1>
        <table class="sortable">
            <thead></thead>
            <tbody>
                <tr>
                    <th>File</th>
                    <th>Date</th>
                </tr>
                {% for filename, fileinfo in client_files.items %}
                <tr>
                    <td><a href='/api/download?filename={{filename}}&path={{fileinfo.path}}'>{{filename}}</a></td>
                    <td>{{fileinfo.modified}}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="section">
        <h1>Custom Clients</h1>
        <table class="sortable">
            <thead></thead>
            <tbody>
                <tr>
                    <th>File</th>
                    <th>Date</th>
                </tr>
                {% for filename, fileinfo in client_custom_files.items %}
                <tr>
                    <td><a href='/api/download?filename={{filename}}&path={{fileinfo.path}}'>{{filename}}</a></td>
                    <td>{{fileinfo.modified}}</td>
                    <td><a href='/api/delete_file?filename={{filename}}&path={{fileinfo.path}}'>Delete</a></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}