{% extends 'base.html.twig' %}

{% block title %}Sermon Notes{% endblock %}

{% block stylesheets %}
<link href="/theme/assets/css/main.css" rel="stylesheet" />
<link href='/theme/assets/css/jquery-ui.theme.css' rel='stylesheet' />
<link href='/theme/assets/css/jquery-ui.structure.css' rel='stylesheet' />
<link href='/css/style.css' rel='stylesheet' />
{% endblock %}

{% block javascripts %}
<script src='/js/script.js'></script>
<script src="/theme/assets/js/jquery.min.js"></script>
<script src='/theme/assets/js/jquery-ui.js'></script>
<script src="/theme/assets/js/browser.min.js"></script>
<script src="/theme/assets/js/breakpoints.min.js"></script>
<script src="/theme/assets/js/util.js"></script>
<script src="/theme/assets/js/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js" integrity="sha512-ohlWmsCxOu0bph1om5eDL0jm/83eH09fvqLDhiEdiqfDeJbEvz4FSbeY0gLJSVJwQAp0laRhTXbUQG+ZUuifUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{% endblock %}

{% block body %}
<div id='wrapper'>
    <div id='main'>
        <div class='inner'>
            <section class='ref-tab'>
                <ul id='ref-list'>
                </ul>
            </section>

            <section class='ref'>
                <h2>Reference</h2>
                <div style='display:inline-block'>
                    <button onclick='increaseFont()'><i class='fa fa-plus'></i></button>&nbsp;
                    <button onclick='decreaseFont()'><i class='fa fa-minus'></i></button>&nbsp;
                    <button onclick='openRef(false)'><i class='fa fa-book'></i></button>
                </div>
                <div id="ref" style='font-size:12pt;'></div>
                <div id='note-list'>
                    <table>
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Speaker</th>
                                <th>Passage</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for n in reverseNoteSort %}
                        {{ n.toTableRow()|raw }}
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>

            <section class="notes">
                <div id='note-header-left'>
                    <h2>Notes</h2>
                    <i id='save-check' class='fa fa-check'></i>
                </div>
                <div id='note-header-right'>
                    <select id='template' onchange="retrieveTemplate('template','notes')">
                        <option value=0>-- Template --</option>
                        {% for t in app.user.templates %}
                        <option value="{{ t.id }}">{{ t.name }}</option>
                        {% endfor %}
                    </select>&nbsp;
                    <button id="previewBtn" class='button' onclick='previewNote()'>
                        <i class='fa fa-eye'></i>
                    </button>
                    &nbsp;
                    <button id='show-hide-btn' class='button' onclick='toggleFields()'>
                        <i class='fa fa-table'></i>
                    </button>
                </div>

                <div id='fields-container'>
                    <input type="hidden" id="noteId" value="" />
                    <input type="text" id="noteTitle" placeholder="Title..." />
                    <input type='text' id='noteDate' onchange='textDirty=true;saved=false;' />
                    <input type='text' id='newSpeaker' placeholder='Name...' onkeyup='saveSpeaker(event)' style='display:none;' />
                    <select id="speaker" onchange='newSpeaker()'>
                        <option value=0>-- Speaker --</option>
                        <option value='new'>New Speaker</option>
                        {% for s in app.user.speakers %}
                        <option value='{{ s.id }}'>{{ s.name }}</option>
                        {% endfor %}
                    </select>
                    <input type='text' id='newSeries' placeholder='Series...' onkeyup='saveSeries(event)' style='display:none;' />
                    <select id="series" onchange='newSeries()'>
                        <option value=0>-- Series --</option>
                        <option value='new'>New Series</option>
                        {% for s in app.user.series %}
                        <option value='{{ s.id }}'>{{ s.name }}</option>
                        {% endfor %}
                    </select>
                    <input type='text' id='passage' placeholder='Passage...' onchange='saved=false;textDirty=true;' />
                </div>

                <textarea id="notes" wrap="hard"></textarea>
                <div id='notePreview'></div>
            </section>
        </div>
    </div>

    {% include('default/sidebar.html.twig') %}

</div>

<div id="refQuery">
    <select id='referenceType' onchange='retrieveBooks()'>
        <option>-- Select --</option>
        <option value='bible'>Bible</option>
        <option value='creed'>Various Creed</option>
        <option value='bc'>Belgic Confession</option>
        <option value='hc'>Heidelberg Catechism</option>
        <option value='cd'>Canons of Dort</option>
        <option value='wcf'>Westminster Confession of Faith</option>
        <option value='wsc'>Westminster Shorter Catechism</option>
        <option value='wlc'>Westminster Larger Catechism</option>
    </select>
    <select id='referenceBook' onchange='filterBooks()'>
    </select>
    <span id='chapter-range' style='color:white;'></span>
    <input type="text" id="referenceSearch" placeholder="Search" onkeyup='filterVerse()'>
    <span id='verse-range' style='color:white;'></span>
    <br />
    <button id="searchBtn" onclick="queryRef()">Search</button>&nbsp;
    <button id='closeSearch' onclick='closeRef()'>Close</button>
</div>

<div id='passage-popup'>
</div>
{% endblock %}