{% extends "base_config.html" %}
{% block content %}

<div class="page">
    <div class="section">
        <h2 class="section-title">Plugins</h2>
        <div class="section-cards">
            <div class="card">
                <div class="card-title-row">
                    <img class="card-icon" src="/static/assets/icons/github.svg" alt="Github">
                    <h3 class="card-title">
                        Github
                        {% if current_config.content_type.github %}
                            <img id="configured-icon-github" class="configured-icon" src="/static/assets/icons/confirm-icon.svg" alt="Configured">
                        {% endif %}
                    </h3>

                </div>
                <div class="card-description-row">
                <p class="card-description">Set repositories for Khoj to index</p>
                </div>
                <div class="card-action-row">
                    <a class="card-button" href="/config/content_type/github">
                        {% if current_config.content_type.github %}
                            Update
                        {% else %}
                            Setup
                        {% endif %}
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
                    </a>
                </div>
                {% if current_config.content_type.github %}
                    <div id="clear-github" class="card-action-row">
                        <button class="card-button" onclick="clearContentType('github')">
                            Disable
                        </button>
                    </div>
                {% endif %}
            </div>
            <div class="card">
                <div class="card-title-row">
                    <img class="card-icon" src="/static/assets/icons/markdown.svg" alt="markdown">
                    <h3 class="card-title">
                        Markdown
                        {% if current_config.content_type.markdown %}
                            <img id="configured-icon-markdown" class="configured-icon" src="/static/assets/icons/confirm-icon.svg" alt="Configured">
                        {% endif %}
                    </h3>
                </div>
                <div class="card-description-row">
                    <p class="card-description">Set markdown files for Khoj to index</p>
                </div>
                <div class="card-action-row">
                    <a class="card-button" href="/config/content_type/markdown">
                        {% if current_config.content_type.markdown %}
                            Update
                        {% else %}
                            Setup
                        {% endif %}
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
                    </a>
                </div>
                {% if current_config.content_type.markdown %}
                    <div id="clear-markdown" class="card-action-row">
                        <button class="card-button" onclick="clearContentType('markdown')">
                            Disable
                        </button>
                    </div>
                {% endif %}
            </div>
            <div class="card">
                <div class="card-title-row">
                    <img class="card-icon" src="/static/assets/icons/org.svg" alt="org">
                    <h3 class="card-title">
                        Org
                        {% if current_config.content_type.org %}
                            <img id="configured-icon-org" class="configured-icon" src="/static/assets/icons/confirm-icon.svg" alt="Configured">
                        {% endif %}
                    </h3>
                </div>
                <div class="card-description-row">
                <p class="card-description">Set org files for Khoj to index</p>
                </div>
                <div class="card-action-row">
                    <a class="card-button" href="/config/content_type/org">
                        {% if current_config.content_type.org %}
                            Update
                        {% else %}
                            Setup
                        {% endif %}
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
                    </a>
                </div>
                {% if current_config.content_type.org %}
                    <div id="clear-org" class="card-action-row">
                        <button class="card-button" onclick="clearContentType('org')">
                            Disable
                        </button>
                    </div>
                {% endif %}
            </div>
            <div class="card">
                <div class="card-title-row">
                    <img class="card-icon" src="/static/assets/icons/pdf.svg" alt="PDF">
                    <h3 class="card-title">
                        PDF
                        {% if current_config.content_type.pdf %}
                            <img id="configured-icon-pdf" class="configured-icon" src="/static/assets/icons/confirm-icon.svg" alt="Configured">
                        {% endif %}
                    </h3>
                </div>
                <div class="card-description-row">
                <p class="card-description">Set PDF files for Khoj to index</p>
                </div>
                <div class="card-action-row">
                    <a class="card-button" href="/config/content_type/pdf">
                        {% if current_config.content_type.pdf %}
                            Update
                        {% else %}
                            Setup
                        {% endif %}
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
                    </a>
                </div>
                {% if current_config.content_type.pdf %}
                    <div id="clear-pdf" class="card-action-row">
                        <button class="card-button" onclick="clearContentType('pdf')">
                            Disable
                        </button>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="section">
        <h2 class="section-title">Features</h2>
        <div class="section-cards">
            <div class="card">
                <div class="card-title-row">
                    <img class="card-icon" src="/static/assets/icons/chat.svg" alt="Chat">
                    <h3 class="card-title">
                        Chat
                        {% if current_config.processor and current_config.processor.conversation %}
                            <img id="configured-icon-conversation-processor" class="configured-icon" src="/static/assets/icons/confirm-icon.svg" alt="Configured">
                         {% endif %}
                    </h3>
                </div>
                <div class="card-description-row">
                <p class="card-description">Setup Khoj Chat with OpenAI</p>
                </div>
                <div class="card-action-row">
                    <a class="card-button" href="/config/processor/conversation">
                        {% if current_config.processor and current_config.processor.conversation %}
                            Update
                        {% else %}
                            Setup
                        {% endif %}
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
                    </a>
                </div>
                {% if current_config.processor and current_config.processor.conversation %}
                    <div id="clear-conversation" class="card-action-row">
                        <button class="card-button" onclick="clearConversationProcessor()">
                            Disable
                        </button>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="section">
        <div id="results-count">
            <label for="results-count-slider">Results Count: <span id="results-count-value">5</span></label>
            <input type="range" id="results-count-slider" name="results-count-slider" min="1" max="10" step="1" value="5">
        </div>
        <div id="status" style="display: none;"></div>
        <button id="configure" type="submit">⚙️ Configure</button>
        <button id="reinitialize" type="submit">🔄 Reinitialize</button>
    </div>
</div>
<script>
    function clearContentType(content_type) {
        const csrfToken = document.cookie.split('; ').find(row => row.startsWith('csrftoken'))?.split('=')[1];
        fetch('/api/delete/config/data/content_type/' + content_type, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.status == "ok") {
                var contentTypeClearButton = document.getElementById("clear-" + content_type);
                contentTypeClearButton.style.display = "none";

                var configuredIcon = document.getElementById("configured-icon-" + content_type);
                configuredIcon.style.display = "none";
            }
        })
    };

    function clearConversationProcessor() {
        const csrfToken = document.cookie.split('; ').find(row => row.startsWith('csrftoken'))?.split('=')[1];
        fetch('/api/delete/config/data/processor/conversation', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.status == "ok") {
                var conversationClearButton = document.getElementById("clear-conversation");
                conversationClearButton.style.display = "none";

                var configuredIcon = document.getElementById("configured-icon-conversation-processor");
                configuredIcon.style.display = "none";
            }
        })
    };

    var configure = document.getElementById("configure");
    configure.addEventListener("click", function(event) {
        event.preventDefault();
        configure.disabled = true;
        configure.innerHTML = "Configuring...";
        const csrfToken = document.cookie.split('; ').find(row => row.startsWith('csrftoken'))?.split('=')[1];
        fetch('/api/update?&client=web', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            }
        })
        .then(response => response.json())
        .then(data => {
            console.log('Success:', data);
            document.getElementById("status").innerHTML = "Configured successfully!";
            document.getElementById("status").style.display = "block";
            configure.disabled = false;
            configure.innerHTML = "⚙️ Configured";
        })
        .catch((error) => {
            console.error('Error:', error);
            document.getElementById("status").innerHTML = "Unable to save configuration. Raise issue on Khoj Discord or Github.";
            document.getElementById("status").style.display = "block";
            configure.disabled = false;
            configure.innerHTML = "⚙️ Configure";
        });
    });

    var reinitialize = document.getElementById("reinitialize");
    reinitialize.addEventListener("click", function(event) {
        event.preventDefault();
        reinitialize.disabled = true;
        reinitialize.innerHTML = "Reinitializing...";
        const csrfToken = document.cookie.split('; ').find(row => row.startsWith('csrftoken'))?.split('=')[1];
        fetch('/api/update?&client=web&force=True', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            }
        })
        .then(response => response.json())
        .then(data => {
            console.log('Success:', data);
            document.getElementById("status").innerHTML = "Reinitialized successfully!";
            document.getElementById("status").style.display = "block";
            reinitialize.disabled = false;
            reinitialize.innerHTML = "🔄 Reinitialized";
        })
        .catch((error) => {
            console.error('Error:', error);
            document.getElementById("status").innerHTML = "Unable to reinitialize. Raise issue on Khoj Discord or Github.";
            document.getElementById("status").style.display = "block";
            reinitialize.disabled = false;
            reinitialize.innerHTML = "🔄 Reinitialize";
        });
    });

    // Setup the results count slider
    const resultsCountSlider = document.getElementById('results-count-slider');
    const resultsCountValue = document.getElementById('results-count-value');

    // Set the initial value of the slider
    resultsCountValue.textContent = resultsCountSlider.value;

    // Store the slider value in localStorage when it changes
    resultsCountSlider.addEventListener('input', () => {
        resultsCountValue.textContent = resultsCountSlider.value;
        localStorage.setItem('khojResultsCount', resultsCountSlider.value);
    });

    // Get the slider value from localStorage on page load
    const storedResultsCount = localStorage.getItem('khojResultsCount');
    if (storedResultsCount) {
        resultsCountSlider.value = storedResultsCount;
        resultsCountValue.textContent = storedResultsCount;
    }
</script>
{% endblock %}
