{% 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' />
<link href='//cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css' rel='stylesheet' />
<style>
#notes,
#notePreview {
    font-size: {{ meta.noteTextSize }}pt;
}
button.button i {
    font-size: 1.5em;
}
</style>
{% endblock %}

{% block javascripts %}
<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='//momentjs.com/downloads/moment-with-locales.js'></script>
<script src="//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>
<script src='//cdn.datatables.net/2.0.8/js/dataTables.min.js'></script>
<script>
let saveInterval = ({{ meta.saveInterval }} * 1000);
let saveTimeout = ({{ meta.saveTimeout }} * 1000);
const SAVE_FAILURE_LIMIT = {{ meta.saveFailureCount }};
let saveFailureCount = {{ meta.saveFailureCount }};
</script>
<script src='/js/script.js'></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 id='openRefBtn' class='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 id='note-table' data-order='[[ 3, "desc" ]]'>
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Speaker</th>
                                <th>Passage</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </section>

            <section class="notes">
                <div id='note-header-left'>
                    <h2>Notes</h2>
                    <i id='save-check' class='fa fa-save'></i>
                </div>
                <div id='note-header-right'>
                    <select id='template' onchange="retrieveTemplate('template','notes')" style='width:200px;'>
                        <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>&nbsp;
                    <button id='shareBtn' class='button'>
                        <i class='fas fa-share-alt'></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' placeholder='Date...' onchange='textDirty=true;saved=false;' />
                    <input type='text' id='passage' placeholder='Passage...' onchange='saved=false;textDirty=true;' />
                    <br />
                    <input type='text' id='recording' name='recording' placeholder='Recording link...' />
                    <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>
                </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>
        <option value='lbc'>London Baptist Confession</option>
        <option value='39a'>Thirty-Nine Articles</option>
        <option value='1hc'>First Helvetic Confession</option>
        <option value='2hc'>Second Helvetic Confession</option>
        <option value='sd'>Savoy Declaration</option>
        <option value='agc'>Augsburg Confession</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>

<!-- The modal background -->
<div id='modal-backdrop' class="modal-backdrop fade in" style='display:none;'></div>

<!-- The modal container -->
<div id='modal-container' class="modal-container" style='display:none;'>
  <!-- The modal header -->
  <header class="modal-header">Share Note</header>

  <!-- The modal body -->
  <form id="emailForm" class="modal-body">
    <label for="email">Enter Friends Email:</label>
    <input type="email" id="shareEmail" name="email" required />
    <button type='button' id="submit" class="btn btn-primary" onclick='shareNote()'>Submit</button>
  </form>

  <!-- The modal footer -->
  <footer class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick='closeShareNote()'>Close</button>
  </footer>
</div>
{% endblock %}