{% extends "template.html" %}
{% block body %}
<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Guilds</title>
</head>
<style>
    .make-listing-content {
        visibility: hidden;
        background: var(--background-darker-still);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
        padding: 20px;
        border-radius: 8px;
        transition: height 0.5s ease, width 0.5s ease, opacity 0.5s ease;
        opacity: 0;
        height: 0;
        width: 0;
        max-height: 92dvh;
        max-width: 92dvw;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .make-listing-content.open {
        visibility: visible;
        height: fit-content;
        opacity: 1;
    }

    .badge-option {
        width: 48px;
        height: 48px;
        object-fit: contain; /* Preserves aspect ratio within the given dimensions */
        cursor: pointer;
        border: 2px solid transparent;
        transition: border 0.2s ease;
    }

    /* Styles for carousel container */
    .carousel-container {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hides scrollbar in Firefox */
        padding-bottom: 10px;
        padding-top: 10px;
        min-width: 100%;
    }

    .carousel-container::-webkit-scrollbar {
        display: none; /* Hides scrollbar in WebKit browsers */
    }

    .carousel-item {
        flex-shrink: 0;
        scroll-snap-align: center;
    }

    /* Add some padding to the shape and badge items */
    .shape-option, .badge-option {
        width: 48px;
        height: 48px;
        object-fit: contain;
        cursor: pointer;
        border: 2px solid transparent;
        transition: border 0.2s ease;
    }

    .selected {
        z-index: 10;
    }

    #guild-emblem-display svg {
        transform: scale(0.65);
        transform-origin: center;
    }

    .emblem-container {
        width: 64px;
        height: 64px;
        position: relative;
        margin-left: -12px;
    }

    .emblem-container svg {
        transform: scale(0.8);
        transform-origin: center;
    }

    .acceptApplication {
        cursor: pointer;
    }

    .rejectApplication {
        cursor: pointer;
    }

    .guild-application-main-entry {
        justify-content: space-around;
        align-items: center;
        padding: 7px;
        border-radius: 10px;
        font-size: 1em;
        background-color: var(--background-darkest);
        width: 90%;
        margin-top: 10px;
        border-bottom: 2px solid var(--primary-color3);
        border-right: 1.5px solid var(--primary-color3);
    }

    .guild-rank-button {
        background: var(--background-darkest);
        border-radius: 7px;
        max-width: 80px;
        width: 60px;
        color: white;
        font-family: 'retrocomputer';
        font-size: 0.75em;
        padding: 5px 0px;
        border-bottom: 2px solid var(--inv-a);
        cursor: pointer;
    }

</style>


</style>
<body>
    <div class="outer-container">
        <div>
            <div id="current-guild-container-button" class="inner-container" style="background-color: var(--background-lightest); padding: 5px 12px;"></div>
        </div>

        <div id="current-guild-container" style="display: none; height: 50%;">
            <button id="applications-button" class="toggle-btn enabled-craft-btn dark-btn" style="max-width: 400px; padding: 10px">Applications</button>
            <button id="guild-options-button" class="toggle-btn enabled-craft-btn dark-btn" style="max-width: 400px; padding: 10px">Options</button>
            <div id="guild-options-view" class="make-listing-content">
                <img id="closeButtonGuildOptions" src="/static/assets/homepage/close.png" class="close-button-general">
                <div id="guild-options-main-modal">
                    <h3>Guild Options</h3>
                    <div class="flexcolumncenter" style="gap: 10px;">
                        <button id="update-emblem-button" class="toggle-btn enabled-craft-btn dark-btn" style="width: 200px; max-width: 200px; padding: 10px">Update Emblem</button>
                        <button id="update-bio-button" class="toggle-btn enabled-craft-btn dark-btn" style="width: 200px; max-width: 200px; padding: 10px">Update Bio</button>
                        <button id="disband-guild-button" class="toggle-btn enabled-craft-btn dark-btn" style="width: 200px; max-width: 200px; padding: 10px">Disband</button>
                        <button id="leave-guild-button" class="toggle-btn enabled-craft-btn dark-btn" style="width: 200px; max-width: 200px; padding: 10px">Leave Guild</button>
                    </div>
                </div>
                <div id="guild-options-update-emblem-modal" class="margintop30" style="display: none;">
                    <!-- Emblem Preview -->
                    <div id="icon-editor-update">
                        <div class="marginbottom10" style="display: flex; justify-content: center;">
                            <div id="emblem-preview-update" style="position: relative; width: 64px; height: 64px; overflow: hidden;">
                            </div>
                        </div>

                        <!-- Shape Selector -->
                        <label for="emblem-shape">Choose a Shape:</label>
                        <div id="shape-picker-update" class="margintop10 carousel-container">
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/anchor.svg" class="shape-option-update" alt="anchor" data-shape="anchor" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/angel-wings.svg" class="shape-option-update" alt="angel-wings" data-shape="angel-wings" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/battleaxe.svg" class="shape-option-update" alt="battleaxe" data-shape="battleaxe" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/bear-tribal.svg" class="shape-option-update" alt="bear-tribal" data-shape="bear-tribal" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/bible.svg" class="shape-option-update" alt="bible" data-shape="bible" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/boar-tribal.svg" class="shape-option-update" alt="boar-tribal" data-shape="boar-tribal" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/butterfly.svg" class="shape-option-update" alt="butterfly" data-shape="butterfly" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/crossed-swords.svg" class="shape-option-update" alt="crossed-swords" data-shape="crossed-swords" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/crossed-torches.svg" class="shape-option-update" alt="crossed-torches" data-shape="crossed-torches" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/deer-tribal.svg" class="shape-option-update" alt="deer-tribal" data-shape="deer-tribal" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/devil.svg" class="shape-option-update" alt="devil" data-shape="devil" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/dragons.svg" class="shape-option-update" alt="dragons" data-shape="dragons" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/fortress.svg" class="shape-option-update" alt="fortress" data-shape="fortress" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/fragmented-sword.svg" class="shape-option-update" alt="fragmented-sword" data-shape="fragmented-sword" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/gladiator-helmet.svg" class="shape-option-update" alt="gladiator-helmet" data-shape="gladiator-helmet" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/hare-tribal.svg" class="shape-option-update" alt="hare-tribal" data-shape="hare-tribal" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/knight-helmet.svg" class="shape-option-update" alt="knight-helmet" data-shape="knight-helmet" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/lynx-tribal.svg" class="shape-option-update" alt="lynx-tribal" data-shape="lynx-tribal" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/magic-portal.svg" class="shape-option-update" alt="magic-portal" data-shape="magic-portal" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/mouse-tribal.svg" class="shape-option-update" alt="mouse-tribal" data-shape="mouse-tribal" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/raccoon-tribal.svg" class="shape-option-update" alt="raccoon-tribal" data-shape="raccoon-tribal" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/shield.svg" class="shape-option-update" alt="shield" data-shape="shield" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/skull.svg" class="shape-option-update" alt="skull" data-shape="skull" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/voodoo-doll.svg" class="shape-option-update" alt="voodoo-doll" data-shape="voodoo-doll" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/web.svg" class="shape-option-update" alt="web" data-shape="web" style="width: 32px; height: 32px;">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/assets/emblems/wizard-hat.svg" class="shape-option-update" alt="wizard-hat" data-shape="wizard-hat" style="width: 32px; height: 32px;">
                            </div>
                        </div>


                        <!-- Color Picker Sigil -->
                        <label for="emblem-color">Choose a Sigil Color:</label>
                        <input type="color" id="emblem-color-update" value="#ff0000">

                        <div class="margin10pxauto">
                            <label for="badge-picker">Choose a Badge:</label>
                            <div id="badge-picker-update" class="carousel-container margin10pxauto" style="display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;">
                                <img src="/static/assets/badges/badge1.svg" class="badge-option selected" alt="Badge 1" data-badge="badge1">
                                <img src="/static/assets/badges/badge2.svg" class="badge-option" alt="Badge 2" data-badge="badge2">
                                <img src="/static/assets/badges/badge3.svg" class="badge-option" alt="Badge 3" data-badge="badge3">
                            </div>
                        </div>

                        <!-- Color Picker Badge -->
                        <label for="emblem-color-badge">Choose a Badge Color:</label>
                        <input type="color" id="emblem-color-badge-update" value="#231F20">

                        <div class="margin10pxauto">
                            <button id="update-emblem" class="toggle-btn enabled-craft-btn dark-btn" style="max-width: 400px; padding: 10px">Update</button>
                            <button class="toggle-btn enabled-craft-btn dark-btn cancel-options-button" style="max-width: 400px; padding: 10px">Cancel</button>
                        </div>
                    </div>
                </div>
                <div id="guild-options-update-bio-modal" class="margintop30" style="display: none;">
                    <div class="input-group margin10pxauto">
                        <label for="update-guild-bio">Update Guild Bio</label>
                        <textarea id="update-guild-bio" placeholder="Enter a new guild bio..." style="max-height: 50px !important; box-sizing: border-box;"></textarea>
                        <div class="margin10pxauto">
                            <button id="update-guild-bio-button" class="toggle-btn enabled-craft-btn dark-btn" style="max-width: 400px; padding: 10px">Update</button>
                            <button class="toggle-btn enabled-craft-btn dark-btn cancel-options-button" style="max-width: 400px; padding: 10px">Cancel</button>
                        </div>
                    </div>
                </div>

                <div id="guild-options-disband-modal" style="display: none;">
                    <div class="modal-content">
                        <div class="margintop30 marginbottom30" style="width: 220px; height: 160px; display: flex;">
                            <p>Disbanding the guild is an irreversible process, deleting the guild and removing all members from it. Are you sure you want to disband the guild?</p>
                        </div>
                        <button id="confirm-disband-button" class="toggle-btn enabled-craft-btn dark-btn">Yes</button>
                        <button class="toggle-btn enabled-craft-btn dark-btn cancel-options-button">Cancel</button>
                    </div>
                </div>

                <div id="guild-options-leave-modal" style="display: none;">
                    <div class="modal-content">
                        <div class="margintop30 marginbottom30" style="width: 220px; height: 160px; display: flex;">
                            <p>Are you sure you want to leave the guild?</p>
                        </div>
                        <button id="confirm-leave-button" class="toggle-btn enabled-craft-btn dark-btn">Yes</button>
                        <button class="toggle-btn enabled-craft-btn dark-btn cancel-options-button">Cancel</button>
                    </div>
                </div>
            </div>
            <div id="guild-applications-view" class="make-listing-content">
                <img id="closeButtonApplications" src="/static/assets/homepage/close.png" class="close-button-general">
                <h3>Applications</h3>
                <div id="applications-list" class="flexcolumncenter"></div>
            </div>
            <p><strong>Bio:</strong> <span id="guild-bio-display"></span></p>
            <div id="members-list-container" class="inner-container" style="height: 100%; padding: 5px 12px;">
                <div class="flexcolumncenter" id="onlineUserList"></div>
            </div>
        </div>


        <div id="search-guilds-container" style="height: 50%;">
            <div class="search-container">
                <div class="input-container">
                    <input type="text" class="search-bar marketplace-search animated-input" placeholder="Search for a guild..." oninput="fetchAndDisplayAllGuilds()">
                    <div class="overlay" style="top: 15px; left: 10px;"></div>
                </div>
            </div>

            <div id="guild-details-view" class="make-listing-content">
                <img id="closeButtonGuildDetails" src="/static/assets/homepage/close.png" class="close-button-general">
                <div style="display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; margin-left: -64px;">
                    <div id="emblem-preview-details" style="position: relative; width: 64px; height: 64px; overflow: hidden;"></div>
                    <div><h1 id="hover-guild-name"></h1></div>
                </div>
                <div id="hover-guild-level"></div>
                <div id="hover-guild-members"></div>
                <div id="hover-guild-members-percentage"></div>
                <div style="background-color: var(--background-lightest); padding: 10px; border-radius: 8px; margin-top: 10px;">
                    <div id="hover-guild-bio"></div>
                </div>
                <div id="hover-guild-leader" class="margin10pxauto"></div>

                <div style="margin-top: 50px;">
                    <button id="apply-to-guild" class="toggle-btn enabled-craft-btn dark-btn margin10pxauto" style="max-width: 300px;">Apply to Guild</button>
                </div>
            </div>

            <div id="create-guild-view" class="make-listing-content">
                <img id="closeButton" src="/static/assets/homepage/close.png" class="close-button-general">
                <h3>Create a Guild</h3>

                <!-- Emblem Preview -->
                <div id="icon-editor">
                    <div style="display: flex; flex-direction: row; align-items: center;">
                        <div id="emblem-preview" style="position: relative; width: 64px; height: 64px; overflow: hidden;">
                        </div>
                        <input type="text" id="guild-name" placeholder="Enter guild name..." maxlength="50" required>
                    </div>

                    <!-- Shape Selector -->
                    <label for="emblem-shape">Choose a Shape:</label>
                    <div id="shape-picker" class="margintop10 carousel-container">
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/anchor.svg" class="shape-option" alt="anchor" data-shape="anchor" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/angel-wings.svg" class="shape-option" alt="angel-wings" data-shape="angel-wings" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/battleaxe.svg" class="shape-option" alt="battleaxe" data-shape="battleaxe" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/bear-tribal.svg" class="shape-option" alt="bear-tribal" data-shape="bear-tribal" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/bible.svg" class="shape-option" alt="bible" data-shape="bible" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/boar-tribal.svg" class="shape-option" alt="boar-tribal" data-shape="boar-tribal" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/butterfly.svg" class="shape-option" alt="butterfly" data-shape="butterfly" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/crossed-swords.svg" class="shape-option" alt="crossed-swords" data-shape="crossed-swords" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/crossed-torches.svg" class="shape-option" alt="crossed-torches" data-shape="crossed-torches" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/deer-tribal.svg" class="shape-option" alt="deer-tribal" data-shape="deer-tribal" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/devil.svg" class="shape-option" alt="devil" data-shape="devil" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/dragons.svg" class="shape-option" alt="dragons" data-shape="dragons" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/fortress.svg" class="shape-option" alt="fortress" data-shape="fortress" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/fragmented-sword.svg" class="shape-option" alt="fragmented-sword" data-shape="fragmented-sword" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/gladiator-helmet.svg" class="shape-option" alt="gladiator-helmet" data-shape="gladiator-helmet" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/hare-tribal.svg" class="shape-option" alt="hare-tribal" data-shape="hare-tribal" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/knight-helmet.svg" class="shape-option" alt="knight-helmet" data-shape="knight-helmet" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/lynx-tribal.svg" class="shape-option" alt="lynx-tribal" data-shape="lynx-tribal" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/magic-portal.svg" class="shape-option" alt="magic-portal" data-shape="magic-portal" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/mouse-tribal.svg" class="shape-option" alt="mouse-tribal" data-shape="mouse-tribal" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/raccoon-tribal.svg" class="shape-option" alt="raccoon-tribal" data-shape="raccoon-tribal" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/shield.svg" class="shape-option" alt="shield" data-shape="shield" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/skull.svg" class="shape-option" alt="skull" data-shape="skull" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/voodoo-doll.svg" class="shape-option" alt="voodoo-doll" data-shape="voodoo-doll" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/web.svg" class="shape-option" alt="web" data-shape="web" style="width: 32px; height: 32px;">
                        </div>
                        <div class="carousel-item">
                            <img src="/static/assets/emblems/wizard-hat.svg" class="shape-option" alt="wizard-hat" data-shape="wizard-hat" style="width: 32px; height: 32px;">
                        </div>
                    </div>

                    <!-- Color Picker Sigil -->
                    <label for="emblem-color">Choose a Sigil Color:</label>
                    <input type="color" id="emblem-color" value="#ff0000">

                    <div class="margin10pxauto">
                        <label for="badge-picker">Choose a Badge:</label>
                        <div id="badge-picker" class="carousel-container margin10pxauto" style="display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;">
                            <img src="/static/assets/badges/badge1.svg" class="badge-option selected" alt="Badge 1" data-badge="badge1">
                            <img src="/static/assets/badges/badge2.svg" class="badge-option" alt="Badge 2" data-badge="badge2">
                            <img src="/static/assets/badges/badge3.svg" class="badge-option" alt="Badge 3" data-badge="badge3">
                        </div>
                    </div>

                    <!-- Color Picker Badge -->
                    <label for="emblem-color-badge">Choose a Badge Color:</label>
                    <input type="color" id="emblem-color-badge" value="#231F20">
                </div>

                <div class="input-group margin10pxauto">
                    <label for="guild-bio">Guild Bio</label>
                    <textarea id="guild-bio" placeholder="Enter a guild bio (you can update this later)..." style="max-height: 50px !important; box-sizing: border-box;"></textarea>
                </div>

                <button id="establish-guild-button" class="toggle-btn enabled-craft-btn dark-btn margin10pxauto" style="max-width: 300px;">Establish Guild</button>
            </div>

            <div id="guilds-list-container" class="inner-container" style="height: 100%; padding: 5px 12px;">
                    <!-- Guilds -->
            </div>

            <div class="create-guild-container margintop10">
                <div>
                    <span class="emsize14">OR</span>
                </div>
                <button id="create-guild-button" class="toggle-btn enabled-craft-btn dark-btn margin10pxauto" style="max-width: 300px;">Create a Guild</button>
            </div>
        </div>


        <div class="footer-display">
            <div class="footer-nav">
                <a class="footer-link" href="/home">Home</a>
                <a class="footer-link" href="/map">Map</a>
                <a class="footer-link" href="/inventory">Inventory</a>
                <a class="footer-link" href="/tactics">Spells</a>
            </div>
            <div class="footer-actions">
                <div id="openMessagesCenterBtn" class="footer-button center-text nowrapclass">Messages <span>(0)</span></div>
                <div id="openFriendsListBtn" class="footer-button center-text nowrapclass"><span class="center-text-no-gap" id="friendsStatus">Friends (0 / 0)</span></div>
                <div id="openChatBtn" class="footer-button center-text"><span id="chatPopup">Chat</span></div>
            </div>
        </div>
    </div>
    <script src="../static/js/Guilds.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
</body>
{% endblock %}
