{% extends "layout.html" %}

{% block content %}
<div class="topmargin">
    <div class="crossref-box">
        <h4>search-the-crossref</h4>
        <p>Look up a DOI to retrieve its formatted BibTeX entry from Crossref.</p>
        <form id="doi-form">
            <label for="search_query">Enter a DOI or DOI URL:</label>
            <input type="text" id="search_query" name="search_query" required placeholder="10.1234/... or https://doi.org/...">
            <button type="submit" class="button" id="doi-search-btn">Search</button>
            <button type="button" class="icons" id="crossref-copy-btn" title="Copy formatted bibtex entry" onclick="copyTextToClipboard()">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
                    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/>
                    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/>
                </svg>
            </button>
            <div id="doi-result"></div>
        </form>
    </div>
    <br>
    <div class="crossref-box">
        <h4>layer-the-arxiv</h4>
        <p>Browse arxiv.org with your speed-the-arxiv tools: favourites, notes, and BibTeX.</p>
        <a href="/layer" class="tools tools-box" style="display:inline-block;">Open layer</a>
    </div>
    <br>
    <div class="crossref-box">
        <h4>search-the-arxiv</h4>
        <p>Direct search of the arXiv API. Select a search field and enter your query.</p>
        <form id="arxiv-search-form">
            <div style="display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 8px;">
                <label style="font-size: 0.8rem; opacity: 0.7;">
                    Search in
                    <select class="config-input" id="arxiv-search-field" style="width: 140px;">
                        <option value="all" selected>All fields</option>
                        <option value="id">Arxiv number</option>
                        <option value="ti">Title</option>
                        <option value="au">Author</option>
                        <option value="abs">Abstract</option>
                        <option value="cat">Category</option>
                        <option value="co">Comment</option>
                        <option value="jr">Journal ref</option>
                    </select>
                </label>
                <label style="font-size: 0.8rem; opacity: 0.7;">
                    Query
                    <input type="text" class="config-input" id="arxiv-search-query" placeholder="e.g. quantum computing" style="width: 300px;" required>
                </label>
                <button type="submit" class="button" id="arxiv-search-btn">Search</button>
            </div>
            <div style="display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 8px;">
                <label style="font-size: 0.8rem; opacity: 0.7;">
                    Max results
                    <input type="number" class="config-input" id="arxiv-search-max" value="50" min="1" max="500" style="width: 80px;">
                </label>
                <label style="font-size: 0.8rem; opacity: 0.7;">
                    Sort by
                    <select class="config-input" id="arxiv-search-sortby" style="width: 160px;">
                        <option value="relevance" selected>Relevance</option>
                        <option value="submittedDate">Submitted date</option>
                        <option value="lastUpdatedDate">Last updated</option>
                    </select>
                </label>
                <label style="font-size: 0.8rem; opacity: 0.7;">
                    Sort order
                    <select class="config-input" id="arxiv-search-sortorder" style="width: 120px;">
                        <option value="descending" selected>Descending</option>
                        <option value="ascending">Ascending</option>
                    </select>
                </label>
            </div>
        </form>
    </div>
    <br>
    <div class="crossref-box">
        <h4>speed-the-arxiv</h4>
        <p>Run preset search queries of the arXiv API.</p>
        <p>
            <button type="button" class="tools tools-box create-new-btn" id="new-config-btn">Create new search</button>
            <button class="icons" title="Open search folder" onclick="openLocalFolder()">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-folder2-open" viewBox="0 0 16 16">
                    <path d="M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v.64c.57.265.94.876.856 1.546l-.64 5.124A2.5 2.5 0 0 1 12.733 15H3.266a2.5 2.5 0 0 1-2.481-2.19l-.64-5.124A1.5 1.5 0 0 1 1 6.14V3.5zM2 6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3H2.5a.5.5 0 0 0-.5.5V6zm-.367 1a.5.5 0 0 0-.496.562l.64 5.124A1.5 1.5 0 0 0 3.266 14h9.468a1.5 1.5 0 0 0 1.489-1.314l.64-5.124A.5.5 0 0 0 14.367 7H1.633z"/>
                </svg>
            </button>
        </p>

        <div id="new-config-form" style="display: none; margin-bottom: 20px;">
        <div class="config-edit-card">
            <label style="font-size: 0.8rem; opacity: 0.7; margin-bottom: 6px;">Name <input type="text" class="config-input" id="new-cfg-name" placeholder="my-search" style="width: 250px;"></label>

            <div class="config-section-header">Search Query</div>
            <div class="config-query-row">
                <label title="arXiv category codes, comma-separated">Categories <input type="text" class="config-input" id="new-cfg-sections" placeholder="quant-ph, cs.LG"></label>
                <label title="How to combine multiple categories: OR = any, AND = all, ANDNOT = exclude">join <select class="config-input" id="new-cfg-and_or_sections"><option value="+OR+" selected>OR</option><option value="+AND+">AND</option><option value="+ANDNOT+">ANDNOT</option></select></label>
            </div>
            <div class="config-query-row">
                <label title="Author last names, comma-separated">Authors <input type="text" class="config-input" id="new-cfg-keyauthors" placeholder="coles, babbush"></label>
                <label title="How to combine multiple authors">join <select class="config-input" id="new-cfg-and_or_keyauthors"><option value="+OR+" selected>OR</option><option value="+AND+">AND</option><option value="+ANDNOT+">ANDNOT</option></select></label>
            </div>
            <div class="config-query-row">
                <label title="Search terms, comma-separated. Searched as exact phrases when 'Exact phrases' is enabled">Keywords <input type="text" class="config-input" id="new-cfg-keywords" placeholder="nisq, adiabatic"></label>
                <label title="How to combine multiple keywords">join <select class="config-input" id="new-cfg-and_or_keywords"><option value="+OR+" selected>OR</option><option value="+AND+">AND</option><option value="+ANDNOT+">ANDNOT</option></select></label>
            </div>
            <div class="config-options-row" style="margin-top: 6px;">
                <label title="Search keywords as exact quoted phrases">Exact phrases <select class="config-input" id="new-cfg-literal"><option value="true" selected>true</option><option value="false">false</option></select></label>
                <label title="How to combine author results with keyword results">Authors ↔ Keywords <select class="config-input" id="new-cfg-and_or"><option value="+OR+" selected>OR</option><option value="+AND+">AND</option><option value="+ANDNOT+">ANDNOT</option></select></label>
            </div>

            <div class="config-section-header">Results</div>
            <div class="config-options-row cols-3">
                <label title="Maximum papers to fetch from arXiv (1-500)">Max results <input type="text" class="config-input" id="new-cfg-max_results" value="100"></label>
                <label title="Only show papers from the last N days">Past days <input type="text" class="config-input" id="new-cfg-past_days" value="30"></label>
                <label title="Fetch community scores from Scirate (slower)">Scirate scores <select class="config-input" id="new-cfg-run_scirate"><option value="false" selected>false</option><option value="true">true</option></select></label>
            </div>

            <div class="config-section-header">Sorting</div>
            <div class="config-options-row cols-4">
                <label title="How arXiv sorts API results">arXiv sort by <select class="config-input" id="new-cfg-arxiv_sortby"><option value="submittedDate" selected>submittedDate</option><option value="relevance">relevance</option><option value="lastUpdatedDate">lastUpdatedDate</option></select></label>
                <label title="Sort direction for arXiv results">Order <select class="config-input" id="new-cfg-arxiv_sortorder"><option value="descending" selected>descending</option><option value="ascending">ascending</option></select></label>
                <label title="Additional sort fields applied after fetching, comma-separated (e.g. date, scirate)">Local sort by <input type="text" class="config-input" id="new-cfg-sortby" value="date, scirate" placeholder="date, scirate"></label>
                <label title="Sort in descending order">Reverse <select class="config-input" id="new-cfg-sortorder_rev"><option value="true" selected>true</option><option value="false">false</option></select></label>
            </div>

            <div style="margin-top: 8px;">
                <button type="button" class="tools tools-box" id="create-config-btn">create</button>
                <button type="button" class="tools tools-box" onclick="document.getElementById('new-config-form').style.display='none'">cancel</button>
            </div>
        </div>
    </div>

    {% for search_ele in search_list %}
        <div class="search-config-block" data-config-name="{{ search_ele.name }}">
        <button class="search search-box" value="{{ search_ele.name }}">{{ search_ele.name }}</button>
        {% if search_ele.cache_age %}
        <span style="font-size: 0.75rem; opacity: 0.5; margin-left: 2px;">cached {{ search_ele.cache_age }}</span>
        {% endif %}
        <button class="collapsible cfg-toggle" type="button" aria-expanded="false" aria-controls="cfg-{{ loop.index }}" data-bs-toggle="collapse" data-bs-target="#cfg-{{ loop.index }}">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
            </svg>
        </button>
        <div id="cfg-{{ loop.index }}" class="collapse">
            <div class="config-edit-card">
                <div class="config-section-header">Search Query</div>
                <div class="config-query-row">
                    <label title="arXiv category codes, comma-separated">Categories <input type="text" class="config-input" data-field="sections" value="{{ search_ele.sections|join(', ') }}"></label>
                    <label title="How to combine multiple categories: OR = any, AND = all, ANDNOT = exclude">join <select class="config-input" data-field="and_or_sections"><option value="+OR+" {{ 'selected' if search_ele.and_or_sections == '+OR+' }}>OR</option><option value="+AND+" {{ 'selected' if search_ele.and_or_sections == '+AND+' }}>AND</option><option value="+ANDNOT+" {{ 'selected' if search_ele.and_or_sections == '+ANDNOT+' }}>ANDNOT</option></select></label>
                </div>
                <div class="config-query-row">
                    <label title="Author last names, comma-separated">Authors <input type="text" class="config-input" data-field="keyauthors" value="{{ search_ele.keyauthors|join(', ') }}"></label>
                    <label title="How to combine multiple authors">join <select class="config-input" data-field="and_or_keyauthors"><option value="+OR+" {{ 'selected' if search_ele.and_or_keyauthors == '+OR+' }}>OR</option><option value="+AND+" {{ 'selected' if search_ele.and_or_keyauthors == '+AND+' }}>AND</option><option value="+ANDNOT+" {{ 'selected' if search_ele.and_or_keyauthors == '+ANDNOT+' }}>ANDNOT</option></select></label>
                </div>
                <div class="config-query-row">
                    <label title="Search terms, comma-separated. Searched as exact phrases when 'Exact phrases' is enabled">Keywords <input type="text" class="config-input" data-field="keywords" value="{{ search_ele.keywords|join(', ') }}"></label>
                    <label title="How to combine multiple keywords">join <select class="config-input" data-field="and_or_keywords"><option value="+OR+" {{ 'selected' if search_ele.and_or_keywords == '+OR+' }}>OR</option><option value="+AND+" {{ 'selected' if search_ele.and_or_keywords == '+AND+' }}>AND</option><option value="+ANDNOT+" {{ 'selected' if search_ele.and_or_keywords == '+ANDNOT+' }}>ANDNOT</option></select></label>
                </div>
                <div class="config-options-row" style="margin-top: 6px;">
                    <label title="Search keywords as exact quoted phrases">Exact phrases <select class="config-input" data-field="literal"><option value="true" {{ 'selected' if search_ele.literal }}>true</option><option value="false" {{ 'selected' if not search_ele.literal }}>false</option></select></label>
                    <label title="How to combine author results with keyword results">Authors ↔ Keywords <select class="config-input" data-field="and_or"><option value="+OR+" {{ 'selected' if search_ele.and_or == '+OR+' }}>OR</option><option value="+AND+" {{ 'selected' if search_ele.and_or == '+AND+' }}>AND</option><option value="+ANDNOT+" {{ 'selected' if search_ele.and_or == '+ANDNOT+' }}>ANDNOT</option></select></label>
                </div>

                <div class="config-section-header">Results</div>
                <div class="config-options-row cols-3">
                    <label title="Maximum papers to fetch from arXiv (1-500)">Max results <input type="text" class="config-input" data-field="max_results" value="{{ search_ele.max_results }}"></label>
                    <label title="Only show papers from the last N days">Past days <input type="text" class="config-input" data-field="past_days" value="{{ search_ele.past_days }}"></label>
                    <label title="Fetch community scores from Scirate (slower)">Scirate scores <select class="config-input" data-field="run_scirate"><option value="false" {{ 'selected' if not search_ele.run_scirate }}>false</option><option value="true" {{ 'selected' if search_ele.run_scirate }}>true</option></select></label>
                </div>

                <div class="config-section-header">Sorting</div>
                <div class="config-options-row cols-4">
                    <label title="How arXiv sorts API results">arXiv sort by <select class="config-input" data-field="arxiv_sortby"><option value="submittedDate" {{ 'selected' if search_ele.arxiv_sortby == 'submittedDate' }}>submittedDate</option><option value="relevance" {{ 'selected' if search_ele.arxiv_sortby == 'relevance' }}>relevance</option><option value="lastUpdatedDate" {{ 'selected' if search_ele.arxiv_sortby == 'lastUpdatedDate' }}>lastUpdatedDate</option></select></label>
                    <label title="Sort direction for arXiv results">Order <select class="config-input" data-field="arxiv_sortorder"><option value="descending" {{ 'selected' if search_ele.arxiv_sortorder == 'descending' }}>descending</option><option value="ascending" {{ 'selected' if search_ele.arxiv_sortorder == 'ascending' }}>ascending</option></select></label>
                    <label title="Additional sort fields applied after fetching, comma-separated (e.g. date, scirate)">Local sort by <input type="text" class="config-input" data-field="sortby" value="{{ search_ele.sortby|join(', ') }}"></label>
                    <label title="Sort in descending order">Reverse <select class="config-input" data-field="sortorder_rev"><option value="true" {{ 'selected' if search_ele.sortorder_rev }}>true</option><option value="false" {{ 'selected' if not search_ele.sortorder_rev }}>false</option></select></label>
                </div>
                <div style="margin-top: 8px;">
                    <button class="tools tools-box save-config-btn">save</button>
                    <button class="tools tools-box reload-config-btn">reload</button>
                    <button class="tools tools-box duplicate-config-btn">duplicate</button>
                    <button class="tools tools-box delete-config-btn">delete</button>
                </div>
            </div>
        </div>
        </div>
    {% endfor %}
    </div>
</div>
{% endblock %}