<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShareHierarchyWindow.aspx.cs"
    Inherits="PDI.Web.ShareHierarchyWindow" %>

        <!DOCTYPE html>

        <html xmlns="http://www.w3.org/1999/xhtml">

        <head runat="server">
            <title>Compartir Carpeta</title>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
            <style>
                body, html {
                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                    font-size: 14px;
                    margin: 0;
                    padding: 0;
                    background-color: #fafafa;
                    color: #333;
                    overflow-y: auto;
                }

                .window-container {
                    padding: 16px 20px;
                }

                h4 {
                    font-size: 0.95rem;
                    color: #6D214F;
                    margin: 0 0 10px 0;
                    font-weight: 600;
                }

                select, input[type="text"] {
                    padding: 8px 10px;
                    border: 1px solid #ccc;
                    border-radius: 5px;
                    font-size: 0.9rem;
                    font-family: inherit;
                    background: #fff;
                    color: #333;
                    box-sizing: border-box;
                    transition: border-color 0.2s;
                }

                select:focus, input[type="text"]:focus {
                    border-color: #6D214F;
                    outline: none;
                }

                .share-section {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    margin-bottom: 1rem;
                }

                .share-section select {
                    flex: 1;
                }

                input[type="submit"] {
                    padding: 8px 18px;
                    background: transparent;
                    color: #6D214F;
                    border: 1.5px solid #6D214F;
                    border-radius: 5px;
                    font-size: 0.9rem;
                    font-weight: 600;
                    cursor: pointer;
                    transition: all 0.2s;
                    font-family: inherit;
                }

                input[type="submit"]:hover {
                    background: #6D214F;
                    color: #fff;
                }

                .share-result input[type="text"] {
                    width: 100%;
                }

                hr {
                    border: 0;
                    border-top: 1px solid #e8e0e5;
                    margin: 14px 0;
                }

                .shared-list-header {
                    font-weight: 600;
                    font-size: 0.85rem;
                    color: #555;
                    padding-bottom: 0.5rem;
                    border-bottom: 1px solid #e8e0e5;
                    margin-bottom: 0.25rem;
                }

                .shared-item {
                    display: grid;
                    grid-template-columns: 1fr auto auto;
                    align-items: center;
                    gap: 0.75rem;
                    padding: 8px 6px;
                    border-bottom: 1px solid #f0eded;
                    font-size: 0.9rem;
                }

                .shared-item:hover {
                    background-color: #f3eef1;
                    border-radius: 4px;
                }

                .copy-link-button {
                    background: transparent;
                    border: 1px solid #6D214F;
                    border-radius: 4px;
                    padding: 4px 10px;
                    cursor: pointer;
                    color: #6D214F;
                    font-size: 0.8rem;
                    font-family: inherit;
                    transition: all 0.2s;
                }

                .copy-link-button:hover {
                    background: #6D214F;
                    color: #fff;
                }

                .shared-item a {
                    color: #d9534f;
                    transition: color 0.2s;
                }

                .shared-item a:hover {
                    color: #c9302c;
                }
            </style>
        </head>

        <body>
            <form id="form1" runat="server">
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

                <div class="window-container">
                    <h4>Compartir Carpeta con:</h4>
                    <div class="share-section">
                        <asp:DropDownList ID="ddlUsers" runat="server" Width="300px" />
                        <asp:Button ID="btnShare" runat="server" Text="Compartir" OnClick="btnShare_Click" />
                    </div>

                    <asp:Panel ID="pnlShareResult" runat="server" Visible="false" CssClass="share-result">
                        <p>¡Compartido! El enlace para este usuario es:</p>
                        <asp:TextBox ID="txtShareLink" runat="server" Width="100%" ReadOnly="true" />
                    </asp:Panel>

                    <hr />

                    <h4>Compartido con:</h4>
                    <div class="shared-list">
                        <asp:Repeater ID="rptSharedWith" runat="server" OnItemCommand="rptSharedWith_ItemCommand">
                            <HeaderTemplate>
                                <div class="shared-list-header">
                                    Usuario
                                </div>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <div class="shared-item">
                                    <span>
                                        <%# Eval("Users.FullName") %>
                                    </span>
                                    <button type="button" class="copy-link-button"
                                        onclick='<%# "copyLink(\"" + Eval("ShareLink") + "\")" %>'><i
                                            class="fas fa-copy"></i> Copiar enlace</button>
                                    <asp:LinkButton ID="btnRemoveShare" runat="server" CommandName="Remove"
                                        CommandArgument='<%# Eval("UserId") %>'>
                                        <i class="fas fa-times" style="color:red;"></i>
                                    </asp:LinkButton>
                                </div>
                            </ItemTemplate>
                            <FooterTemplate>
                                <% if (rptSharedWith.Items.Count==0) { %>
                                    <p>A&uacute;n no se ha compartido con nadie.</p>
                                    <% } %>
                            </FooterTemplate>
                        </asp:Repeater>
                    </div>
                </div>

                <script type="text/javascript">
                    function copyLink(link) {
                        var fullLink = new URL('SharedHierarchyViewer.aspx?ID=' + link, window.location.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + '/').href;

                        if (navigator.clipboard && window.isSecureContext) {
                            navigator.clipboard.writeText(fullLink).then(function () {
                                alert("Enlace copiado al portapapeles.");
                            }, function (err) {
                                fallbackCopyTextToClipboard(fullLink);
                            });
                        } else {
                            fallbackCopyTextToClipboard(fullLink);
                        }
                    }

                    function fallbackCopyTextToClipboard(text) {
                        var textArea = document.createElement("textarea");
                        textArea.value = text;
                        textArea.style.top = "0";
                        textArea.style.left = "0";
                        textArea.style.position = "fixed";
                        document.body.appendChild(textArea);
                        textArea.focus();
                        textArea.select();
                        try {
                            var successful = document.execCommand('copy');
                            if (successful) alert("Enlace copiado al portapapeles.");
                            else alert("No se pudo copiar el enlace.");
                        } catch (err) {
                            alert("No se pudo copiar el enlace.");
                        }
                        document.body.removeChild(textArea);
                    }
                </script>
            </form>
        </body>

        </html>