<%- include('blocks/head.ejs', {title: 'Изменить запись'}) %>
<style>
    label:not(.form-label) {
        font-size: 20px;
    }

    #text-input {
        font-size: 20px;
        background: transparent;
        resize: none;
        outline: none;
        width: 100%;
        height: 250px;
        padding: 5px;
        border-radius: 10px;
        margin-bottom: 20px;
    }

    #text-input:focus {
        outline: none;
    }
</style>
<div class="container center">
    <h2>Изменить запись "<%= note.heading %>"</h2>
</div>
<div class="container">
    <form id="change-note-form">
        <div class="input-group">
            <input id='heading-input' placeholder=" " type="text" value="<%= note.heading %>" name="heading"
                   class="form-input" required>
            <label for="heading-input" class="form-label">Название</label>
        </div>
        <% if (note.type === 'text') { %>
            <label for="text-input">Текст</label>
            <br>
            <textarea id="text-input" name="text" required><%= note.value %></textarea>
        <% } else if (note.type === 'list') { %>
            <div id="items">
                <% for (let i = 0; i < note.value.length; i++) { %>
                    <div class="collection-item" id="item-<%= i + 1 %>">
                        <div class="textarea-field">
                            <textarea id="textarea-<%= i + 1 %>" class="item-textarea"><%- note.value[i] %></textarea>
                        </div>
                        <div class="remove-button-field">
                            <div class="rounded-btn" onclick="remove_item('item-<%= i + 1 %>')">
                                <i class="material-icons">remove</i>
                            </div>
                        </div>
                    </div>
                <% } %>
            </div>
            <div id="add-item-button-field">
                <div class="rounded-btn" id="add-item-button">
                    <i class="material-icons left">add</i>
                </div>
            </div>
            <input type="hidden" name="counter" value="<%= note.value.length %>">
        <% } else { %>
            <p>Ошибка: неизвестный тип записи (<%- note.type %>)</p>
        <% } %>
        <div class="buttons-group">
            <div class="button-container-2-wrap">
                <div id="submit" class="btn big-btn">
                    <i class="material-icons btn-icon">save</i>
                    <div class="btn-text">
                        Сохранить изменения
                    </div>
                </div>
            </div>
            <div class="button-container-2-wrap">
                <div id="cancel-button" class="btn">
                    <i class="material-icons btn-icon">cancel</i>
                    <div class="btn-text">
                        Отмена
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" name="type" value="<%= note.type %>">
    </form>
</div>
<input type="hidden" id="id-input" value="<%= note.id %>" name="id">
<script>
    const event = new Event('init-for-change-note-page')
    window.dispatchEvent(event)

    function remove_item(id) {
        const ul = document.getElementById('list')
        if (ul.children.length > 1) {
            const item = document.getElementById(id)
            item.remove()
        } else {
            alert('В списке должен быть хотя бы один элемент.')
        }
    }
</script>
<%- include('blocks/footer.ejs') %>
