<%- include('blocks/head.ejs', {title: 'Создать запись'}) %>
<style>
    #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;
    }

    .btn {
        margin-bottom: 20px;
    }
</style>
<div class="container center">
    <h3 class="header">Создать запись</h3>
</div>
<div class="container">
    <form id="create-note-form">
        <div class="input-group">
            <input id='heading-input' type="text" name="heading" class="form-input" autocomplete="off" placeholder=" "
                   required>
            <label for="heading-input" class="form-label">Название</label>
        </div>
        <h2>
            Тип
        </h2>
        <p>
            <input type="radio" name="type" id="text_type" value="text" checked>
            <label for="text_type">Текст</label>
        </p>
        <p>
            <input type="radio" name="type" id="list_type" value="list">
            <label for="list_type">Список</label>
        </p>
        <div class="input-field" id="text-field">
            <label for="text-input">Текст</label>
            <textarea id="text-input" name="text"></textarea>
        </div>
        <div id="list-field" style="display: none">
            <div id="items">
                <div class="collection-item" id="item-1">
                    <div class="textarea-field">
                        <textarea id="textarea-1" class="item-textarea"></textarea>
                    </div>
                    <div class="remove-button-field">
                        <div class="rounded-btn" onclick="remove_item('item-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>
        </div>
        <div class="buttons-group">
            <div class="button-container-2">
                <div id="submit" class="btn">
                    <i class="material-icons btn-icon">add</i>
                    <div class="btn-text">
                        Создать
                    </div>
                </div>
            </div>
            <div class="button-container-2">
                <div id="cancel-button" class="btn">
                    <i class="material-icons btn-icon">cancel</i>
                    <div class="btn-text">
                        Отмена
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<script>
    const event = new Event('init-for-new-note-page')
    window.dispatchEvent(event)

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