{% extends 'oef/base.html' %}
{% block content %}
    <h2>Questions</h2>
    There are {{ questions|length }} question sets.

    <div>
        <textarea type="text" id="search-text" name="search" placeholder="Search text.." rows=5 cols=50 ></textarea>

        <button

            _="on click repeat for el in <li.question/>
               set p to the first <pre/> in el then
               if p.title does not contain value of #search-text then hide el">Search</button>
    </div>
    <div>
        Filter by
        <button
        _="on click hide .unnamed then show .named"
        >Named</button>
        <button
        _="on click hide .named then show .unnamed"
        >Unnamed</button>

    <div class="offcanvas offcanvas-end bg-dark" tabindex="-1" id="offcanvasExample" data-bs-scroll="true" data-bs-backdrop="false" aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">Comparisons</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div>
                <ul id="sidebar-list">
                </ul>
                <ul id="sidebar-codes">
                </li>

            </div>
            <button _="on click remove <li.sidebar-item/>">Clear</button>
        </div>
    </div>

    <ul>
        {% for question, format in questions_and_formats %}
            <li class="question {% if format %}named{% else %}unnamed{% endif %}">
                <span class="format-name">
                    {% if format %}
                        Name: <a href='{% url "oef:format_update" format.pk %}'>{{format.name}}</a>
                    {% else %}
                        Unnamed
                    {% endif %}
                    <br/>
                    <span class="specialties">
                    {% if format.specialties %}
                        
                        {% for spec in format.specialties.all  %}
                            {{ spec}},
                            
                        {% endfor %}
                            
                    {% endif %}
                    </span>
                </span>
        <pre class="pre-question" title="{{ question }}">{{ question }}</pre>
                <form>
                    <input type="hidden" name="question" value="{{ question }}">
                    <button
                        hx-post="{% url 'oef:entries_by_question' %}"
                        hx-target="next .result"
                        _="on click toggle @disabled until htmx:afterOnLoad then remove me"
                    >View exams</button>
                    <span class="result"></span>
                    <button
                        hx-post="{% url 'oef:questions_sym' %}"
                        hx-target="next .results-sym"
            {% comment %} _="on click toggle @disabled until htmx:afterOnLoad then remove me" {% endcomment %}
                    >View similar</button>
                    <span class="results-sym"></span>
                    <button class="btn btn-sm" type="button" _="on click
                                                                                                                                                     writeText(title of the previous <pre/>) on navigator.clipboard
                                                                                                                                                     put 'copied!' into me
                                                                                                                                                     wait 1s
                                                                                                                                                     put 'copy1' into me">copy</button>
                    <button class="btn btn-sm" type="button" _="on click set #question1.value to the title of the previous <pre/>">
                        Diff1
                    </button>
                    <button class="btn btn-sm" type="button" _="on click set #question2.value to the title of the previous <pre/> then go to #question2 ">
                        Diff2
                    </button>
                    <button class="btn btn-sm" type="button"
                            _="on click set q to the title of the previous <pre/> then log q then set el to `<li class='sidebar-item'><pre>${q}</pre></li>` then log el then put el at end of #sidebar-list then
                               js
                               new bootstrap.Offcanvas(document.getElementById('offcanvasExample')).show();
                               end
                              ">
                        Add to sidebar
                    </button>
                    <button
                        class="btn btn-sm" type="button"
                        hx-post="{% url 'oef:entries_by_question_codes' %}"
                        hx-target="#sidebar-codes"
                        hx-swap="beforeend"
                        _="on click toggle @disabled until htmx:afterOnLoad then remove me then
                           js
                           new bootstrap.Offcanvas(document.getElementById('offcanvasExample')).show();
                           end
                          "
                    >Add codes to sidebar</button>
                    <input type="text" class="format-name" name="format_name" placeholder="format name" style="display:none">
                    <button
                        class="btn btn-sm save-format-button" type="button" style="display:none"
                        hx-post="{% url 'oef:formats_save' %}"
                    >Save format</button>
                    <button class="btn btn-sm" type="button"
                            _="on click show previous .save-format-button then show previous .format-name then hide me">Save format</button>
                </form>
            </li>
        {% endfor %}
    </ul>

    <div>Diff:</div>
    <form>
        <textarea id="question1" name="question1" cols=40 rows=10></textarea>
        <textarea id="question2" name="question2" cols=40 rows=10></textarea>
        <button
            hx-post='{% url "oef:questions_diff" %}'
            hx-target="#diff-results">Diff</button>
        <br/>
        <button type="button" style="font:inherit;font-size:.8em;background:#3465a4;color:white;border:none;padding: 0 .4em; border-radius: .4em" _="on click
                                                                                                                                                     writeText(#question1.value) on navigator.clipboard
                                                                                                                                                     put 'copied!' into me
                                                                                                                                                     wait 1s
                                                                                                                                                     put 'copy1' into me">copy1</button>
        <button type="button" style="font:inherit;font-size:.8em;background:#3465a4;color:white;border:none;padding: 0 .4em; border-radius: .4em" _="on click
                                                                                                                                                     writeText(#question2.value) on navigator.clipboard
                                                                                                                                                     put 'copied!' into me
                                                                                                                                                     wait 1s
                                                                                                                                                     put 'copy2' into me">copy2</button>
        <button type="button" style="font:inherit;font-size:.8em;background:#3465a4;color:white;border:none;padding: 0 .4em; border-radius: .4em" _="on click
                                                                                                                                                     repeat for pre in .pre-question
                                                                                                                                                     if #question1.value is pre.title
                                                                                                                                                     then go to pre then break
                                                                                                                                                    ">go1</button>
        <button type="button" style="font:inherit;font-size:.8em;background:#3465a4;color:white;border:none;padding: 0 .4em; border-radius: .4em" _="on click
                                                                                                                                                     repeat for pre in .pre-question
                                                                                                                                                     if #question2.value is pre.title
                                                                                                                                                     then go to pre then break
                                                                                                                                                    ">go2</button>
        <br/>results
        <span id="diff-results"></span>
    </form>


{% endblock content %}


{% block css %}
    <style>
        li.question {
            border: 1px solid white;
        }
        .format-name {
            color: blue;
            float: right;
        }
        .specialties {
            color: green;
        }
    </style>

{% endblock css %}