@using TightWiki.Models
@model TightWiki.Models.ViewModels.File.FileAttachmentViewModel
@{
    var sessionState = ViewData["SessionState"] as TightWiki.SessionState ?? throw new Exception("Wiki State Context cannot be null.");
}

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <style>
        .list-group-item:nth-child(odd) {
            background-color: #f8f9fa;
        }
    </style>

    @foreach (var file in sessionState.UserTheme.Files)
    {
        <link rel="stylesheet" href="@Url.Content($"~{file}")" />
    }

    <link id="themeStylesheet" rel="stylesheet" href="" />
    <script>
        $(document).ready(function () {
            localStorage.setItem('theme', 'dark');
            $('nav').removeClass('navbar-light bg-white').addClass('@sessionState.UserTheme.ClassNavBar');
            $('a.nav-link').removeClass('text-dark').addClass('@sessionState.UserTheme.ClassNavLink');
            $('a.dropdown-item').removeClass('text-dark').addClass('@sessionState.UserTheme.ClassDropdown');
            $('span.glyphicon').removeClass('text-dark').addClass('@sessionState.UserTheme.ClassBranding');

            $('a[href="#detachLink"]').click(function (e) {
                var fileName = e.target.id;
                if (confirm("Are you sure you want to detach '" + fileName + "'?")) {
                    $.ajax({
                        type: 'POST',
                        url: '@GlobalConfiguration.BasePath/File/Detach/@Model.PageNavigation/' + fileName + '/@Model.PageRevision',
                        success: function (result) {
                            $("#uploadedFiles").load("@GlobalConfiguration.BasePath/File/PageAttachments/@Model.PageNavigation");
                        }
                    });
                }
            });
        });

        function copyToClipboard(text, element) {

            var ext = text.split('.').pop().toLowerCase();
            if (ext.includes('png') || ext.includes('jpg') || ext.includes('jpeg') || ext.includes('gif') || ext.includes('bmp')) {
                text = '##Image(' + text + ')';
            }
            else {
                text = '##File(' + text + ')';
            }

            navigator.clipboard.writeText(text).then(function () {
                var originalText = element.innerHTML;
                var originalClass = element.className;

                element.innerHTML = '<i class="bi bi-check-circle"></i> Tag Copied';
                element.className = 'btn btn-sm btn-success';

                setTimeout(function () {
                    element.innerHTML = originalText;
                    element.className = originalClass;
                }, 2000);
            }).catch(function (error) {
                console.error('Error copying text: ', error);
            });
        }

    </script>
</head>

<body>
    @foreach (var x in Model.Files)
    {
        <div class="list-group-item d-flex justify-content-between align-items-center">
            <div>
                <a href="@GlobalConfiguration.BasePath/File/Binary/@x.PageNavigation/@x.FileNavigation" target="_blank">@x.Name</a> (@x.FriendlySize)
                <a href="@GlobalConfiguration.BasePath/File/Revisions/@x.PageNavigation/@x.FileNavigation" target="_blank">@x.FileRevision revisions</a>

            </div>
            <div class="btn-group">
                <button class="btn btn-sm btn-outline-primary" onclick="copyToClipboard('@x.Name', this); return false;">
                    <i class="bi bi-clipboard"></i> Copy Tag
                </button>&nbsp;
                @if (@sessionState.CanDelete == true)
                {
                    <a href="#detachLink" id="@x.FileNavigation" class="btn btn-sm btn-outline-danger">Detach</a>
                }
            </div>
        </div>
    }
</body>
</html>
