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

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

{% block stylesheets %}
<link href="{{ asset('css/jquery-ui.theme.css') }}" rel="stylesheet" />
<link href="{{ asset('css/jquery-ui.structure.css') }}" rel="stylesheet" />
<link href="{{ asset('css/light-mode.css') }}" rel="stylesheet" data-css="mode" data-light="{{ asset('css/light-mode.css') }}" data-dark="{{ asset('css/dark-mode.css') }}" />
<link href="{{ asset('css/styles.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;
}
.input-error {
    /* border: solid 2px red !important; */
}
</style>
{% endblock %}

{% block javascripts %}
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/jquery-ui.js') }}"></script>
<script src="{{ asset('js/browser.min.js') }}"></script>
<script src="{{ asset('js/breakpoints.min.js') }}"></script>
<script src="{{ asset('js/util.js') }}"></script>
{#<script src="{{ asset('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>

{{ importmap('app') }}

<script type="module">
    import * as ref from "{{ asset('js/reference.js') }}";
    import * as home from "{{ asset('js/home.js') }}";
    import * as note from "{{ asset('js/note.js') }}";
    import { state } from "{{ asset('js/state.js') }}";
    import * as series from "{{ asset('js/series.js') }}";
    import * as speaker from "{{ asset('js/speaker.js') }}";
    import * as template from "{{ asset('js/template.js') }}";
    window.ref = ref;
    window.home = home;
    window.note = note;
    window.state = state;
    window.series = series;
    window.speaker = speaker;
    window.template = template;

    document.addEventListener('DOMContentLoaded', () => {
        home.initHome();

        const sidebarToggle = document.getElementById('sidebar-link');
        const container = document.querySelector('.container');

        if (sidebarToggle && container) {
            sidebarToggle.addEventListener('click', (e) => {
                e.preventDefault();
                container.classList.toggle('sidebar-collapsed');
            })
        }

        state.saveInterval = ({{ meta.saveInterval }} * 1000);
        state.saveTimeout = ({{ meta.saveTimeout }} * 1000);
        state.saveFailureCount = {{ meta.saveFailureCount }};
    });
</script>
{% endblock %}

{% block body %}
<div id="query"></div>
<div class="container sidebar-collapsed">
    {% include('default/sidebar.html.twig') %}

	<div class="ref-btn-header">&nbsp;</div>
	<div class="ref-btn bottom-row">
		<ul id="ref-list" class="ref-list"></ul>
	</div>
	<div class="mobile-note-header">
		<h2>Notes</h2>
		<label class="switch">
			<input type="checkbox" id="mobile-dark-mode-checkbox"/>
			<span class="slider round"></span>
		</label>
		<button id="mobile-open-ref" class="button">
            <i class="fa fa-book"></i>
        </button>
		<button id="mobile-show-hide-btn" class="button">
            <i class="fa fa-table"></i>
        </button>
	</div>
	<div class="ref-header">
		<label class="switch">
			<input type="checkbox" id="dark-mode-checkbox"/>
			<span class="slider round"></span>
		</label>
		<h2>Reference</h2>
		<div class="ref-header-buttons">
			<button id="increaseFont"><i class="fa fa-plus"></i></button>
			<button id="decreaseFont"><i class="fa fa-minus"></i></button>
			<button id="open-ref" class="button"><i class="fa fa-book"></i></button>
		</div>
	</div>
	<div id="ref-text" class="ref-text bottom-row" style="font-size:{{ meta.noteTextSize }}pt;"></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>

	<div class="note-header">
		<div class="note-header-column">
			<button id="previewBtn" class="button">
				<i class="fa fa-eye"></i>
			</button>
			<button id="show-hide-btn" class="button">
				<i class="fa fa-table"></i>
			</button>
			<button id="shareBtn" class="button">
				<i class="fas fa-share-alt"></i>
			</button>
		</div>
		<div class="note-header-column">
			<h2>Notes</h2>
			<i id="save-check" class="fa fa-save"></i>
		</div>
		<div class="note-header-column">
			<div class="dropdown" id="templateDropdown">
				<select id="template" onchange="template.retrieveTemplate('template', 'notes')" >
					<option value="0">-- Template --</option>
                    {% for t in app.user.templates %}
                        <option value="{{ t.id }}">{{ t.name }}</option>
                    {% endfor %}
				</select>
			</div>
		</div>
	</div>
	<div class="notes bottom-row">
		<div class="fields-container">
			<input type="hidden" id="noteId" value="">
			<input type="text" id="noteTitle" placeholder="Title..." onkeyup="state.textDirty=true;state.saved=false;">
			<input type="text" id="noteDate" placeholder="Date..." onchange="state.textDirty=true;state.saved=false;">
			<input type="text" id="passage" placeholder="Passage..." onchange="state.textDirty=true;state.saved=false;">
			<input type="text" id="recording" placeholder="Recording link...">
			<input type="text" id="newSpeaker" placeholder="Name..." onkeyup="speaker.saveSpeaker(event)" style="display:none;">
			<div class="dropdown" id="speakerDropdown">
				<select id="speaker" onchange="speaker.newSpeaker()">
					<option value="0">-- Speaker --</option>
					<option value="new">New Speaker</option>
                    {% for s in speakers %}
                        <option value="{{ s.id }}">{{ s.name }}</option>
                    {% endfor %}
				</select>
			</div>
			<input type="text" id="newSeries" placeholder="Series..." onkeyup="series.saveSeries(event)" style="display:none;">
			<div class="dropdown" id="seriesDropdown">
				<select id="series" onchange="series.newSeries()">
					<option value="0">-- Series --</option>
					<option value="new">New Series</option>
                    {% for s in series %}
                        <option value="{{ s.id }}">{{ s.name }}</option>
                    {% endfor %}
				</select>
			</div>
		</div>
		<div class="note-text">
			<textarea id="notes" wrap="hard" style="font-size: {{ meta.noteTextSize }}pt"></textarea>
		</div>
        <div id="notePreview"></div>
	</div>
</div>

<div id="refQuery">
    <select id="referenceType" onchange="ref.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="ref.filterBooks()" style="display:none;"></select>
    <span id="chapter-range"></span>
    <input type="text" id="referenceSearch" placeholder="Search" onkeyup="ref.filterVerse()" style="display:none;">
    <span id="verse-range"></span>
    <br />
    <button id="searchBtn">Search</button>&nbsp;
    <button id="closeSearch">Close</button>
</div>

<div id="passage-popup"></div>

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

<div id="modal-container" class="modal-container" style="display:none;">
  <header class="modal-header">Share Note</header>
  <form id="emailForm" class="modal-body">
    <label for="shareEmail">Enter Friends Email:</label>
    <input type="email" id="shareEmail" name="email" required />
    <button type="button" id="submit" class="btn btn-primary" onclick="note.shareNote()">Submit</button>
  </form>
  <footer class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="note.closeShareNote()">Close</button>
  </footer>
</div>

{% endblock %}