<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prompt Sanctuary</title>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='icon/favicon.ico') }}">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Caveat&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

    <!-- CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='style/feedback.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='style/side.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='style/library.css') }}">

    <!-- JavaScript -->
    <script defer src="{{ url_for('static', filename='script/feedback.js') }}"></script>
    <script defer src="{{ url_for('static', filename='script/side_panel.js') }}"></script>
    <script defer src="{{ url_for('static', filename='script/library_copy.js') }}"></script>
    <script defer src="{{ url_for('static', filename='script/edit_prompt.js') }}"></script>
    <script defer src="{{ url_for('static', filename='script/share_prompt.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

    <!-- SEO Meta Tags -->
    <meta name="description" content="Explore the functionalities of Prompt Sanctuary - a platform for generating and refining prompts. Access a Community Prompt, generate custom prompts, and explore advanced prompting features.">
    <meta name="keywords" content="prompt sanctuary, prompt generator, Community Prompt, advanced prompting, prompt refinement, prompt generation, writing prompts, creative writing, prompt ideas, writing inspiration, writing exercises, writing generator, story prompts, fiction prompts, writing tools, writing community, writing resources, idea generator, story ideas, writing challenges, writing help, narrative prompts, plot inspiration, storytelling aids, writer's block solutions, creative story ideas, plot development tools, character creation prompts, dialogue prompts, writing prompt app, daily writing prompts, inspiration for writers, story starter, creative writing exercises, fictional writing prompts, writing prompt generator online, flash fiction prompts, novel writing prompts, writing practice, creative brainstorming, storytelling generator, prompting, prompt, llm, llama, gemini, openai, chatgpt">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://sanctuary01.pythonanywhere.com/">
    <meta property="og:title" content="Prompt Sanctuary">
    <meta property="og:description" content="Explore the functionalities of Prompt Sanctuary - a platform for generating and refining prompts. Access a Community Prompt, generate custom prompts, and explore advanced prompting features.">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://sanctuary01.pythonanywhere.com/">
    <meta property="twitter:title" content="Prompt Sanctuary">
    <meta property="twitter:description" content="Explore the functionalities of Prompt Sanctuary - a platform for generating and refining prompts. Access a Community Prompt, generate custom prompts, and explore advanced prompting features.">
</head>

<body>
    <div id="particles-js"></div>

    <!-- Side Panel -->
    <div class="side-panel" id="sidePanel">
        <!-- logo -->
        <div id="toggleButton" onclick="toggleSidePanel()" class="image-logo">
            <img id="preview-logo" alt="Image Preview" src="{{ url_for('static', filename='icon/sanctuary.png') }}">
        </div>
        <!-- logo end -->

        <!-- primary -->
        <div class="side-list" id="side-list">
            <ul id="side-top">
                <li onclick="window.location.href='{{ url_for('main.home') }}';"><strong>Home</strong></li>
                <li onclick="window.location.href='{{ url_for('main.mylib') }}';"><strong>Saved Prompts</strong></li>
                <li onclick="window.location.href='{{ url_for('main.trying') }}';"><strong>Prompt Trial</strong></li>
            </ul>
        </div>
        <!-- primary end -->

        <!-- secondary -->
        <div class="side-list" id="side-list">
            <ul id="side-middle">
                <li onclick="window.location.href='{{ url_for('main.library') }}';"><strong>Community Prompt</strong></li>
                <li onclick="window.location.href='{{ url_for('main.generate') }}';"><strong>Basic Prompt</strong></li>
                <li onclick="window.location.href='{{ url_for('main.advance') }}';"><strong>Advance Prompt</strong></li>
            </ul>
        </div>
        <!-- secondary end -->

        <!-- logout and Feedback -->
        <div class="side-list" id="bottom-list">
            <ul id="side-bottom">
                <li onclick="window.location.href='{{ url_for('main.logout') }}';"><strong>Logout</strong></li>
                <li class="feedback-button" onclick="openFeedbackPopup()"><strong>Feedback</strong></li>
            </ul>
        </div>
        <!-- logout and Feedback end -->
    </div>
    <!-- side panel ended -->

    <!-- feedback panel -->
    <div id="feedback-popup" class="popup hidden">
        <div class="popup-content">
            <button id="close-popup" class="close-button" aria-label="Close feedback popup">
                ✖️
            </button>
            <h2 class="popup-title">Share your feedback</h2>
            <form id="feedback-form">
                <textarea class="feedback-textarea" name="feedback" placeholder="Enter your feedback here" required></textarea>
                <div class="button-container">
                    <button type="submit" class="submit-button">Submit</button>
                </div>
            </form>
        </div>
    </div>
    <!-- feedback panel ended -->

    <h1 id="toggleButton" onclick="toggleSidePanel()"><strong>Saved Prompt(s)</strong></h1>
    <div id="editPopup">
        <h2>Edit Prompt</h2>
        <form action="/save_edit" method="post">
            <input type="hidden" name="random_val" id="editRandomVal">
            <label for="editTitle">Title:</label>
            <input type="text" id="editTitle" name="edited_title" placeholder="Enter title">
            <label for="editPrompt">Prompt:</label>
            <textarea id="editPrompt" name="edited_prompt" placeholder="Enter prompt"></textarea>
            <button id="saveEdit" type="submit">Save</button>
            <button id="cancelEdit" type="button">Cancel</button>
        </form>
    </div>
    <div class="main">
        <h3>Here are Your saved prompts:</h3>
        {% if saved_prompts %}
        <div id="imageBoxContainer" class="flex-container">
            <div class="prompt-container">
                {% for prompt in saved_prompts %}
                <div class="prompt-box">
                    <li><h4>{{ prompt[1] }}</h4></li>
                    <p>{{ prompt[2] }}</p>
                    <button class="copy-button" data-clipboard-text="{{ prompt[2] }}">Copy</button>
                    <button class="edit-button" onclick="openEditPopup('{{ prompt[0] }}', '{{ prompt[1] }}', '{{ prompt[2] }}')">Edit</button>
                    <button class="share-button" data-prompt-id="{{ prompt[0] }}" data-title="{{ prompt[1] }}" data-prompt="{{ prompt[2] }}">Share</button>
                    <form action="{{ url_for('main.delete_prompt') }}" method="post" style="display: inline;">
                        <input type="hidden" name="prompt_id" value="{{ prompt[0] }}">
                        <button type="submit" class="delete-button">Delete</button>
                    </form>
                </div>
                {% endfor %}
            </div>
        </div>
        {% else %}
        <h4>You have No saved prompts yet.</h4>
        {% endif %}
    </div>
    <!-- footer -->
    <footer>
        <p>prompt sanctuary by <a href="https://1999azzar.github.io/1999AZZAR/" target="_blank">azzar budiyanto</a></p>
    </footer>
    <!-- footer end -->
</body>
</html>