@{
    ViewBag.Title = "Инструкция";
}
<div id="faq-text" class="text-left">

    <div id="accordion" class="mt-4">

        <!--Следующий раздел-->
        <div class="card">
            <div class="card-header" id="label-youtube">
                <h5 class="mb-0">
                    <button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#id-youtube" aria-expanded="true" aria-controls="id-youtube">
                        Демонстрация работы карты (видео)
                    </button>
                </h5>
            </div>
            <div id="id-youtube" class="collapse" aria-labelledby="label-youtube" data-parent="#accordion">
                <div class="card-body">
                    <!--Текст-->
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fjXPdFZwhzM" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>

        <!--Следующий раздел-->
        <div class="card">
            <div class="card-header" id="label-timeline">
                <h5 class="mb-0">
                    <button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#id-timeline" aria-expanded="true" aria-controls="id-timeline">
                        Временной промежуток
                    </button>
                </h5>
            </div>
            <div id="id-timeline" class="collapse" aria-labelledby="label-timeline" data-parent="#accordion">
                <div class="card-body">
                    <!--Текст-->
                    <p>
                        Основным инструментом выборки данных является фильтр выбора временного промежутка, осуществляемый с помощью двух инструментов:
                    </p>
                    <ul>
                        <li>Слайдер временной линии (Timeline)</li>
                        <li>Поля ввода конкретного года</li>
                    </ul>
                    <p>
                        Цифрой <span class="font-weight-bold back-ground red">I</span> на рисунке обозначена временная линия (двухсторонний слайдер), позволяющая задавать временные границы с помощью «ползунков» <span class="font-weight-bold back-ground green">IV</span> и <span class="font-weight-bold back-ground green">V</span>.
                        Цифрами <span class="font-weight-bold back-ground orange">II</span> и <span class="font-weight-bold back-ground orange">III</span> на рисунке обозначены временные границы – от наименьшего года, упоминаемого в онтологии, до текущего.
                    </p>
                    <div class="text-center">
                        <img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "1"})" alt="Временная линия">
                        <p hidden>Название рисунка, если оно нужно</p>
                    </div>
                    <br />
                    <p>
                        Можно воспользоваться вводом конкретного года как для нижней (цифра <span class="font-weight-bold back-ground red">I</span>), так и для верхней (цифра <span class="font-weight-bold back-ground red">II</span>) границы поиска, представленной на рисунке ниже.
                        При вводе некорректного значения изменения не произойдут.
                    </p>
                    <div class="text-center">
                        <img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "2"})" alt="Ввод конкретного года">
                        <p hidden>Название рисунка, если оно нужно</p>
                    </div>
                </div>
            </div>
        </div>

        <!--Следующий раздел-->
        <div class="card">
            <div class="card-header" id="label-name-find">
                <h5 class="mb-0">
                    <button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#id-name-find" aria-expanded="true" aria-controls="id-name-find">
                        Поиск поселения по названию
                    </button>
                </h5>
            </div>
            <div id="id-name-find" class="collapse" aria-labelledby="label-name-find" data-parent="#accordion">
                <div class="card-body">
                    <!--Текст-->
                    <p>
                        Для поиска поселений по названию используется поле ввода, отмеченное цифрой <span class="font-weight-bold back-ground red">I</span> на рисунке ниже.
                    </p>
                    <div class="text-center">
                        <img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "3"})" alt="Поиск по названию">
                        <p hidden>Название рисунка, если оно нужно</p>
                    </div>
                    <p>
                        При вводе значения в поле поиска, осуществляется подбор возможных поселений, название которых в начале содержит введенное значение (показано на рисунке ниже).
                        Пользователю предоставляется возможность выбрать нужное поселение из выпадающего списка или выполнить поиск по нажатию на кнопку.
                        При выборе поселения произойдет центрирование карты, и увеличится масштаб.
                    </p>
                    <div class="text-center">
                        <img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "4"})" alt="Пример выпадающего списка при поиске поселений по названию">
                        <p hidden>Название рисунка, если оно нужно</p>
                    </div>
                </div>
            </div>
        </div>

        <!--Следующий раздел-->
        <div class="card">
            <div class="card-header" id="label-filters">
                <h5 class="mb-0">
                    <button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#id-filters" aria-expanded="true" aria-controls="id-filters">
                        Фильтрация поселений
                    </button>
                </h5>
            </div>
            <div id="id-filters" class="collapse" aria-labelledby="label-filters" data-parent="#accordion">
                <div class="card-body">
                    <!--Текст-->
                    <p>
                        Доступна фильтрация поселений на карте по отношению к определенному типу поселения и по вхождению в состав административных единиц. Группа фильтров представлена на рисунке ниже.
                    </p>
                    <div class="text-center">
                        <img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "5"})" alt="Фильтры поселений">
                        <p hidden>Название рисунка, если оно нужно</p>
                    </div>
                    <p>
                        Цифрой <span class="font-weight-bold back-ground red">I</span> отмечена кнопка применения фильтров, а другая кнопка (цифра <span class="font-weight-bold back-ground orange">II</span>) отменит действие фильтров на карте и вернет списки в начальное состояние. 
                        По умолчанию списки обоих фильтров находятся в свернутом состоянии и разворачиваются при нажатии на название. 
                        Секция фильтра по типу поселений выделена цифрой <span class="font-weight-bold back-ground green">III</span>, а по административным единицам – <span class="font-weight-bold back-ground light-green">IV</span>, при этом цифрами <span class="font-weight-bold back-ground purple">V</span> отмечено количество вариантов фильтрации. 
                        С помощью опций выбора <span class="font-weight-bold back-ground blue">VI</span> можно комбинировать фильтры, чтобы затем применить их одной кнопкой <span class="font-weight-bold back-ground red">I</span>.
                    </p>
                </div>
            </div>
        </div>

        <!--Следующий раздел-->
        <div class="card">
            <div class="card-header" id="label-info">
                <h5 class="mb-0">
                    <button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#id-info" aria-expanded="true" aria-controls="id-info">
                        Подробная информация о поселении
                    </button>
                </h5>
            </div>
            <div id="id-info" class="collapse" aria-labelledby="label-info" data-parent="#accordion">
                <div class="card-body">
                    <!--Текст-->
                    <p>
                        Поселения на карте представлены в качестве маркеров. При нажатии на любой маркер слева появится боковая панель, содержащая подробную информация о выбранном поселении (секция <span class="font-weight-bold back-ground red">I</span> на рисунке ниже).
                    </p>
                    <div class="text-center">
                        <img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "6"})" alt="Левая боковая панель">
                        <p hidden>Название рисунка, если оно нужно</p>
                    </div>
                    <p>
                        На панели подробной информации присутствует кнопка «Добавить в экспорт», отмеченная цифрой <span class="font-weight-bold back-ground orange">II</span>. При нажатии этой кнопки поселение добавится в список экспорта данных.
                        Нажатие на кнопку <span class="font-weight-bold back-ground yellow">III</span> скроет боковую панель, то же самое произойдет при повторном нажатии на маркер того же самого поселения.
                        Информация о поселении разделена <span class="green">зеленой линией</span>, выше которой расположена постоянная информация о поселении. В этом разделе при наличии отображается история города. Так как история может быть весьма большой, она по умолчанию скрыта и разворачивается по нажатию на кнопку <span class="font-weight-bold back-ground dark-blue">IV</span>.
                        Ниже <span class="green">зеленой линии</span> располагаются секции (отмечены цифрами <span class="font-weight-bold back-ground purple">V</span>) с дополинтельной информацией, среди которой есть источник. Если источником является некоторая ссылка (цифры <span class="font-weight-bold back-ground blue">VI</span>), она будет доступна для перехода.
                    </p>                   
                </div>
            </div>
        </div>

        <!--Следующий раздел-->
        <div class="card">
            <div class="card-header" id="label-export">
                <h5 class="mb-0">
                    <button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#id-export" aria-expanded="true" aria-controls="id-export">
                        Экспорт данных
                    </button>
                </h5>
            </div>
            <div id="id-export" class="collapse" aria-labelledby="label-export" data-parent="#accordion">
                <div class="card-body">
                    <!--Текст-->
                    <p>
                        Чтобы выполнить экспорт данных в определенный формат, необходимо в первую очередь добавить несколько поселений в список экспорта, как это было описано в разделе "Подробная информация о поселении".
                        Затем нужно нажать кнопку, представленную на рисунке ниже цифрой <span class="font-weight-bold back-ground red">I</span>.
                    </p>
                    <div class="text-center">
                        <img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "7"})" alt="Правая панель в режиме экспорта">
                        <p hidden>Название рисунка, если оно нужно</p>
                    </div>
                    <p>
                        В результате нажатия на кнопку <span class="font-weight-bold back-ground red">I</span> появится боковая панель <span class="font-weight-bold back-ground green">II</span>, содержащая кнопки экспорта в формат Word (<span class="font-weight-bold back-ground purple">IV</span>) и Excel (<span class="font-weight-bold back-ground dark-blue">V</span>). 
                        Кроме того, пользователю еще раз предлагается уточнить, информация о всех ли добавленных поселений должна быть экспортирована. 
                        По умолчанию, все поселения отмечены для экспорта (отмечено цифрами <span class="font-weight-bold back-ground orange">III</span>), однако пользователь может снять выделение, либо вернуть его, пока открыта панель.
                    </p>
                </div>
            </div>
        </div>
        
        @if ((bool)ViewBag.isAuth)
        {
            <!--Следующий раздел-->
            <div class="card">
                <div class="card-header" id="label-moderator">
                    <h5 class="mb-0">
                        <button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#id-moderator" aria-expanded="true" aria-controls="id-moderator">
                            Модерация данных
                        </button>
                    </h5>
                </div>
                <div id="id-moderator" class="collapse" aria-labelledby="label-moderator" data-parent="#accordion">
                    <div class="card-body">
                        <!--Текст-->
                        <p>
                            Получив роль модератора появляется возможность добавления нового поселения на карту с помощью кнопки, отмеченной цифрой <span class="font-weight-bold back-ground red">I</span> на рисунке ниже.
                        </p>
                        <div class="text-center">
                            <img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "8"})" alt="Правая панель в режиме добавления нового поселения">
                            <p hidden>Название рисунка, если оно нужно</p>
                        </div>
                        <p>
                            Панель на рисунке содержит форму ввода данных (цифра <span class="font-weight-bold back-ground green">II</span>), которая позволит добавить новое поселение в онтологию.
                            При нажатии на кнопку «Отправить данные» (цифра <span class="font-weight-bold back-ground orange">III</span>) происходит проверка введенных данных и в случае их корректности, данные формы будут отправлены на сервер.
                            Отмеченные цифрой <span class="font-weight-bold back-ground dark-blue">IV</span> данные являются обязательными для заполнения, так как составляют основу любого поселения, а поля ввода с пометкой цифры <span class="font-weight-bold back-ground purple">V</span> являются дополнительными.
                            Поле ввода URL поселения по умолчанию не редактируется, чтобы URL создавался программным образом на стороне сервера, так как он является уникальным ключом поселения.
                            Однако с помощью селектора <span class="font-weight-bold back-ground blue">VI</span> можно ввести свой URL, при этом поле станет обязательным для заполнения.
                        </p>
                        <br />
                        <p>
                            Новый инструментарий также появляется при открытии подробной информации о поселении (см. рисунок ниже).
                        </p>
                        <div class="text-center">
                            <img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "9"})" alt="Левая панель с новым функционалом">
                            <p class="font-weight-bold">Левая панель с новым функционалом</p>
                        </div>
                        <p>
                            Новые элементы отмечены цифрами <span class="font-weight-bold back-ground">I-IV</span>.
                            При нажатии на кнопку <span class="font-weight-bold back-ground red">I</span> появится правое боковое меню с возможность редактирования сведения об основном поселении (см. рисунок <span class="font-italic">"Редактирование информации основного поселения"</span>).
                            При этом поля ввода правой панели будут заполнены соответствующими данными из левой панели.
                        </p>
                        <div class="text-center">
                            <img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "10"})" alt="Левая и правая панели в режиме редактирования информации основного поселения">
                            <p class="font-weight-bold">Редактирование информации основного поселения</p>
                        </div>
                        <br />
                        <p>
                            Воспользовавшись кнопкой, отмеченной цифрой <span class="font-weight-bold back-ground orange">II</span> на рисунке <span class="font-italic">"Левая панель с новым функционалом"</span>, пользователь увидит в правой панели новую форму добавления новых дополнительных сведений, что показано на рисунке ниже.
                            А если нажать кнопки <span class="font-weight-bold back-ground blue">IV</span>, откроется режим редактирования дополнительной информации.
                        </p>
                        <div class="text-center">
                            <img class="img-fluid" src="@Url.Action("Image", "Home", new { id = "11"})" alt="Правая панель в режиме добавления дополнительной информации о поселении">
                            <p hidden>Название рисунка, если оно нужно</p>
                        </div>
                        <p>
                            На рисунке выше параметры формы, отмеченные цифрой <span class="font-weight-bold back-ground red">I</span>, обязательны для заполнения, так как являются основой для создания сведений. 
                            Все остальные параметры не обязательные, однако также проходят проверку на корректность, например, в качестве численности населения нельзя ввести слово. 
                            Для упрощения работы с большими массивами было решено сделать список выбора типов поселений и административных единиц (цифры <span class="font-weight-bold back-ground green">II</span> на рисунке).
                        </p>
                    </div>
                </div>
            </div>

            <!--Следующий раздел-->
            <div class="card">
                <div class="card-header" id="label-doxygen">
                    <h5 class="mb-0">
                        <button class="btn btn-outline-secondary" data-toggle="collapse" data-target="#id-doxygen" aria-expanded="true" aria-controls="id-doxygen">
                            Документация к приложению
                        </button>
                    </h5>
                </div>
                <div id="id-doxygen" class="collapse" aria-labelledby="label-doxygen" data-parent="#accordion">
                    <div class="card-body">
                        <!--Текст-->
                        <p>
                            Нажмите <a href="~/Content/html/index.html" target="_blank">сюда</a> для перехода к документации, созданной на основе комментариев с помощью Doxygen.
                        </p>
                    </div>
                </div>
            </div>
        }
    </div>
</div>
