{% extends 'LayoutMain.html' %}
{% load static %}

{% block title %}Dashboard - My Django Project{% endblock %}

{% block content %}

<div>

    <main id="main" class="main">

        <div class="pagetitle">
            <nav>
                <ol class="breadcrumb">
                    <a href="#">
                        <i class="far fa-comments">|</i>
                    </a>
                    <span><b>Files</b></span>
                </ol>
            </nav>
        </div>

        <section class="section profile">

            <div class="con content">

                <div class="usergroup card">

                    <!-- Header -->
                    <div class="card-header bg-primary text-white d-flex justify-content-between">

                        <span>Files List</span>

                        <a href="{% url 'add_file' %}"
                           class="btn btn-light btn-sm">
                            Add New
                        </a>

                    </div>

                    <!-- Body -->
                    <div class="ca card-body">

                        <table class="table table-bordered align-middle">

                            <thead>
                                <tr>
                                    <th>Sl.no</th>
                                    <th>Name</th>
                                    <th>Display</th>
                                    <th>URL</th>
                                    <th>Edit</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>

                            <tbody>

                                {% if files %}

                                    {% for item in files %}

                                    <tr>

                                        <!-- Serial Number -->
                                        <td>
                                            {{ forloop.counter }}
                                        </td>

                                        <!-- Name -->
                                        <td>
                                            {{ item.name }}
                                        </td>

                                        <!-- Image Display -->
                                        <td>

                                            {% if item.image %}

                                                <img src="{{ item.image.url }}"
                                                     width="80"
                                                     height="80"
                                                     style="object-fit:cover; border-radius:5px;">

                                            {% else %}

                                                No Image

                                            {% endif %}

                                        </td>

                                        <!-- URL -->
                                        <td style="width:250px;">

                                            {% if item.image %}

                                                <!-- <input type="text"
                                                       value="{{ item.image.url }}"
                                                       id="fileurl{{ item.id }}"
                                                       class="form-control form-control-sm text-center mb-2"
                                                       readonly> -->

                                                <button class="btn btn-sm btn-light border"
                                                        onclick="copyFileUrl('fileurl{{ item.id }}')">

                                                    Click to Copy

                                                </button>

                                            {% endif %}

                                        </td>

                                        <!-- Edit -->
                                        <td class="text-center">

                                            <a href="{% url 'edit_file' id=item.id %}"
                                               class="text-primary">

                                                <i class="fas fa-edit"></i>

                                            </a>

                                        </td>

                                        <!-- Delete -->
                                        <td class="text-center">

                                            <a href="{% url 'delete_file' id=item.id %}"
                                               class="text-danger"
                                               onclick="return confirm('Are you sure to delete this file?')">

                                                <i class="fas fa-trash"></i>

                                            </a>

                                        </td>

                                    </tr>

                                    {% endfor %}

                                {% else %}

                                    <tr>

                                        <td colspan="6"
                                            class="text-center">

                                            No Files Found

                                        </td>

                                    </tr>

                                {% endif %}

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </section>

    </main>

</div>

<!-- Copy URL Script -->
<script>

function copyFileUrl(id) {

    var copyText = document.getElementById(id);

    copyText.select();
    copyText.setSelectionRange(0, 99999);

    navigator.clipboard.writeText(copyText.value);

}

</script>

{% endblock %}