<%- include('blocks/head.ejs', {title: 'Ваши записи'}) %>
<style>
    .icon-and-input {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
    }

    .icon-and-input i {
        margin-right: 5px;
    }
</style>
<div class="center">
    <h2 class="header">Синхронизация локальных записей с облаком</h2>
</div>
<div class="container">
    <form id="sync-form">
        <div class="icon-and-input">
            <i class="material-icons">language</i>
            <div class="input-group">
                <input type="text" placeholder=" " name="address" id="address-input" class="form-input"
                       autocomplete="off" required>
                <label for="address-input" class="form-label">Адрес сервера</label>
            </div>
        </div>
        <span class="helper-text">
            Так как у проекта нет финансирования, нет официального сервера. Сюда вы должны ввести адрес сервера, с которым хотите провести синхронизацию, например: http://localhost:3000.
            На сервере должен быть запущен <a
                    href="https://github.com/coder8080/express-notes">этот</a> проект.</span><br>
        Адрес сервера должен быть указан на главной странице сайта. <br>
        Совет: не перепутайте протокол безопасности (http:// и https://) и при необходимости не забудьте указать порт
        (:3000)
        <p>
            <input name="type" type="radio" value="upload" id="upload">
            <label for="upload">Отправить новые локальные записи на сервер</label>
        </p>
        <p>
            <input name="type" type="radio" value="download" id="download">
            <label for="download">Скачать новые записи с сервера</label>
        </p>
        <p>
            <input name="type" type="radio" value="upload-and-download" id="upload-and-download" checked>
            <label for="upload-and-download">Отправить и скачать несинхронизированные записи записи</label>
        </p>
        <p>
            <input name="type" type="radio" value="hard-upload" id="hard-upload">
            <label for="hard-upload">Загрузить локальные записи на сервер и удалить другие (полная синхронизация с
                настольным приложением)</label>
        </p>
        <p>
            <input name="type" type="radio" value="hard-download" id="hard-download">
            <label for="hard-download">Скачать записи с сервера и удалить другие (полная синхронизация с
                сервером)</label>
        </p>
        <div class="icon-and-input" style="margin-top: 30px;">
            <i class="material-icons">account_circle</i>
            <div class="input-group">
                <input type="text" placeholder=" " class="form-input" name="login" id='login-input' autocomplete="off"
                       required>
                <label for="login-input" class="form-label">Логин</label>
            </div>
        </div>
        <div class="icon-and-input" style="margin-top: 20px;">
            <i class="material-icons">lock</i>
            <div class="input-group">
                <input type="password" placeholder=" " class="form-input" name="password" id="password-input" required>
                <label for="password-input" class="form-label">Пароль</label>
            </div>
        </div>
        <div class="buttons-group">
            <div class="button-container-2-wrap">
                <div class="btn" id="submit">
                    <i class="material-icons btn-icon">cloud</i>
                    <div class="btn-text">
                        Синхронизировать
                    </div>
                </div>
            </div>
            <div class="button-container-2-wrap">
                <div class="btn" id="cancel-button">
                    <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-sync-page')
    window.dispatchEvent(event)
</script>
<%- include('blocks/footer.ejs') %>
