<%- include('blocks/head.ejs', {title: note.heading}) %>
<style>
    .btn {
        margin-bottom: 20px;
    }
</style>
<div class="center">
    <h3 class="header">
        <%= note.heading %>
    </h3>
</div>
<div class="container">
    <% if (note.value.length >= 500) { %>
        <div class="btn change-button">
            <i class="material-icons btn-icon">edit</i>
            Изменить
        </div>
        <div class="btn go-on-main-button">
            <i class="material-icons btn-icon">home</i>
            На главную
        </div>
        <div class="btn remove-button">
            <i class="material-icons btn-icon">delete</i>
            Удалить
        </div>
    <% } %>
    <% if(note.type === 'text') { %>
        <p id="text"><%- note.value.replaceAll('\n', '<br>') %></p>
    <% } else if (note.type === 'list') { %>
        <ul class="collection">
            <% for (const item of note.value) { %>
                <li class="collection-item">
                    <p>
                        <%= item %>
                    </p>
                </li>
            <% } %>
        </ul>
    <% } else { %>
        <p>Ошибка - неизвестный тип(<%= note.type %>)</p>
    <% } %>
    <div class="buttons-group">
        <div class="button-container-3-wrap">
            <div class="btn change-button">
                <i class="material-icons btn-icon">edit</i>
                <div class="btn-text">
                    Изменить
                </div>
            </div>
        </div>
        <div class="button-container-3-wrap">
            <div class="btn go-on-main-button">
                <i class="material-icons btn-icon">home</i>
                <div class="btn-text">
                    На главную
                </div>
            </div>
        </div>
        <div class="button-container-3-wrap">
            <div class="btn remove-button">
                <i class="material-icons btn-icon">delete</i>
                <div class="btn-text">
                    Удалить
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="id-input" value="<%= note.id %>" name="id">
<script>
    let event = new Event('init-for-note-page')
    window.dispatchEvent(event)
</script>
<%- include('blocks/footer.ejs') %>
