<%- include('blocks/head.ejs', {title: 'Ваши записи'}) %>
<style>
    .navbar {
        width: 100%;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .navbar-icon {
        height: 100%;
        width: 60px;
    }

    .navbar-text {
        height: 100%;
        padding-right: 60px;
        width: 100vw;
        font-size: 30px;
    }

    .vertical-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .navbar-spacer {
        height: 60px;
        width: 100%;
    }

    #menu {
        width: 300px;
        min-width: 300px;
        height: 100%;
        position: fixed;
        top: 0;
        left: -300px;
        z-index: 1;
        /*animation-fill-mode: forwards;*/
    }

    #menu-button {
        cursor: pointer;
    }

    .menu-item-heading {
        font-size: 25px;
        margin-bottom: 20px;
    }

    .card {
        border-radius: 1rem;
        padding: 15px;
    }

    .card-title {
        text-align: center;
        font-size: 20px;
    }

    .card-action {
        display: flex;
        flex-direction: column;
    }

    .card-content > p {
        text-indent: 15px;
    }

    .read {
        margin-bottom: 5px;
    }

    .grid-item {
        width: 250px;
        max-width: 250px;
    }

    .grid {
        width: 100%;
        margin: 0 auto;
    }

    #dimming {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: black;
        opacity: 0.5;
    }

    @keyframes menu-out {
        from {
            left: -300px
        }
        to {
            left: 0
        }
    }

    @keyframes menu-in {
        from {
            left: 0
        }
        to {
            left: -300px
        }
    }

    .menu-author {
        position: absolute;
        bottom: 5px;
        width: 300px;
        left: 0;
        text-align: center;
    }

    .read, .change {
        cursor: pointer;
    }

    .no-notes {
        font-size: 25px;
    }
</style>
<div class="navbar">
    <div class="navbar-icon vertical-center">
        <i id="menu-button" class="material-icons">settings</i>
    </div>
    <div class="navbar-text vertical-center">
        Ваши записи
    </div>
</div>
<div class="navbar-spacer"></div>
<div id="menu">
    <div class="container">
        <div class="menu-item-heading">
            Тема:
        </div>
        <form id="theme_form">
            <input type="radio" id="light_theme" name="theme" value="light"
            <% if (theme === 'light') { %>
                   checked
                    <% } %>
            >
            <label for="light_theme">Стандартная светлая</label>
            <br>
            <input type="radio" id="dark_theme" name="theme" value="dark"
            <% if (theme === 'dark') { %>
                   checked
                    <% } %>
            >
            <label for="dark_theme">Стандартная тёмная</label>
            <br>
            <input type="radio" id="red_theme" name="theme" value="red"
            <% if (theme === 'red') { %>
                   checked
                    <% } %>
            >
            <label for="red_theme">Красная</label>
            <br>
            <input type="radio" id="blue_theme" name="theme" value="blue"
            <% if (theme === 'blue') { %>
                   checked
                    <% } %>
            >
            <label for="blue_theme">Синяя</label>
            <div>
                <input type="radio" id="purple_theme" name="theme" value="purple"
                <% if (theme === 'purple') { %>
                       checked
                        <% } %>
                >
                <label for="purple_theme">Фиолетовая</label>
            </div>
        </form>
        <div class="menu-author center">
            created by coder8080 in 2021
        </div>
    </div>
</div>
<% if (are_notes === true) { %>
    <div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 250, "fitWidth": true}'>
        <% notes.forEach((note) => { %>
            <div class="grid-item">
                <div class="container">
                    <div class="card">
                        <div class="card-content">
                            <div class="card-title">
                                <p class="one-line">
                                    <%= note.heading %>
                                </p>
                            </div>
                            <p class="four-lines">
                                <% if (note.type === 'text') { %>
                                    <%= note.value %>
                                <% } else if (note.type === 'list') { %>
                                    <%= note.value[0] %>
                                <% } else { %>
                                    error: unknown type
                                <% } %>
                            </p>
                            <div class="card-action">
                                <a class="read vertical-center">
                                    <i class="material-icons tiny">book</i>
                                    Читать
                                    <input type="hidden" value="<%= note.id %>">
                                </a>
                                <a class="change vertical-center">
                                    <i class="material-icons tiny">edit</i>
                                    Изменить
                                    <input type="hidden" value="<%= note.id %>">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <% }) %>
    </div>
<% } else { %>
    <div class="center no-notes">У вас ещё нет записей</div>
<% } %>
<div class="buttons-group">
    <div class="button-container-2">
        <div class="btn" id="new_note_button">
            <i class="material-icons btn-icon">add</i>
            <div class="btn-text">
                Создать запись
            </div>
        </div>
    </div>
    <div class="button-container-2">
        <div class="btn" id="sync-button">
            <i class="material-icons btn-icon">cloud</i>
            <div class="btn-text">
                Синхронизировать
            </div>
        </div>
    </div>
</div>
<script>
    let event = new Event('init-for-profile-page')
    window.dispatchEvent(event)
</script>
<%- include('blocks/footer.ejs') %>
