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

{% block title %}Profile | 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>
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: normal;
  align-content: normal;
}

.user-flex {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  border: solid 1px black;
  margin: 0 10px 0 20px;
}

.settings-flex {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  border: solid 1px black;
  margin: 0 20px 0 10px;
}

.notes-flex {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}

label,
input[type="number"],
input[type="email"],
input[type="text"] {
    /*display: inline !important;*/
}

input[type="checkbox"] {
    appearance: auto;
    opacity: 1;
    margin: 0;
    width: 20px;
    height: 20px;
}
</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='//cdn.datatables.net/2.0.8/js/dataTables.min.js'></script>
<script type='text/javascript'>
$(function() {

});

function saveSettings() {
    var saveInterval = $('#save-interval');
    var saveReferences = $('#save-references');
    var noteTextSize = $('#note-text-size');
    var trackSaveSize = $('#track-save-size');
    var saveTimeout = $('#save-timeout');
    var saveFailureCount = $('#save-failure-count');

    fetch('/save-settings', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            'saveInterval': saveInterval.val(),
            'saveReferences': saveReferences.is(':checked'),
            'noteTextSize': noteTextSize.val(),
            'trackSaveSize': trackSaveSize.is(':checked'),
            'saveTimeout': saveTimeout.val(),
            'saveFailureCount': saveFailureCount.val()
        })
    })
        .then(response => response.json())
        .then(results => {
            alert(results.msg);
        });
}

function rollUp(cont) {
    $('#'+cont+'-container').toggle(600);
    //$('#'+cont+'-div').height(100);
}
</script>
{% endblock %}

{% block body %}
<button id='back' onclick='history.go(-1)'>Back</button><br/>

<div class="flex-container">
    <div class="user-flex" id='user-div'>
        <h2 onclick='rollUp("user")'>User Profile</h2>
        <div id='user-container'>
            <label for='name'>Name: </label>
            <input type='text' id='name' name='name' value='{{ app.user.name }}' /><br />

            <label for='email'>Email: </label>
            <input type='email' id='email' name='email' value='{{ app.user.email }}' /><br />

            <label for='password'>Password: </label>
            <input type='password' id='password' name='password' /><br/>

            <label for='new-password'>New Password: </label>
            <input type='password' id='new-password' name='new-password' /><br />

            <label for='conf-password'>Confirm Password: </label>
            <input type='password' id='conf-password' name='conf-password' /><br />

            <button id='save-profile' onclick='saveProfile()'>Save Profile</button>
        </div>
    </div>
    <div class="settings-flex">
        <h2 onclick='rollUp("settings")'>Site Settings</h2>
        <div id='settings-container'>
            <label for='save-interval'>Save Interval (seconds)?</label>
            <input type='number' id='save-interval' value='{{ meta.saveInterval }}' title='What is the interval to trigger an autosave, in seconds?' /><br/>

            <label for='save-references'>Save References?</label>
            <input type='checkbox' id='save-references' {{ meta.saveReferences }} title='Do you want to also save reference content' /><br />

            <label for='note-text-size'>Text Size? (points)</label>
            <input type='number' id='note-text-size' value='{{ meta.noteTextSize }}' title='Font size of the note preview, in points' /><br />

            <label for='track-save-size'>Track Save Size?</label>
            <input type='checkbox' id='track-save-size' {{ meta.noteTextSize }} title='Do you want to track the size of saves, useful if teathering to mobile device?' /><br />

            <label for='save-timeout'>Save Timeout? (seconds)</label>
            <input type='number' id='save-timeout' value='{{ meta.saveTimeout }}' title='How long does it wait to before cancelling the save and trying again later?' /><br />

            <label for='save-failure-count'>Save Failure Count? </label>
            <input type='number' id='save-failure-count' value='{{ meta.saveFailureCount }}' title='How many times do you want to attempt to auto save before it stops and waits for a manual attempt' /><br />

            <button id='save-settings' onclick='saveSettings()'>Save Settings</button>
        </div>
    </div>
</div>

<div class='flex-container'>
    <div class='user-flex'>
        <h2>My Shared Notes</h2>
        <table id='shared-notes'>
            <thead>
                <th>Recipient</th>
                <th>Title</th>
                <th>Passage</th>
            </thead>
            <tbody>
            {% for s in shared %}
            {% endfor %}
            </tbody>
        </table>
    </div>

    <div class='settings-flex'>
        <h2>Notes Shared w/Me</h2>

        <table id='shared-with-me'>
            <thead>
                <th>Owner</th>
                <th>Title</th>
                <th>Passage</th>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
{% endblock %}