@{
    ViewData["Title"] = "О системе";
}

@* заголовок страницы *@
<h1 class="mb-4">О системе «ТехноМир»</h1>

@* описание для кого сервис *@
<section class="mb-4">
    <h3>Для кого этот сервис?</h3>
    <p>
        «ТехноМир» — это интернет-магазин компьютерной и мобильной техники.
        Сервис предназначен для всех, кто хочет купить качественную технику
        по доступным ценам: от обычных покупателей до компаний, которые закупают
        технику для сотрудников.
    </p>
</section>

@* описание ролей *@
<section class="mb-4">
    <h3>Роли пользователей</h3>
    @* таблица с ролями — сделана через Bootstrap table *@
    <table class="table table-bordered table-hover">
        @* шапка таблицы *@
        <thead class="table-primary">
            <tr>
                <th>Роль</th>
                <th>Описание</th>
            </tr>
        </thead>
        <tbody>
            @* строка — Гость *@
            <tr>
                <td><strong>Гость</strong></td>
                <td>Пользователь без аккаунта. Может смотреть каталог и главную страницу.</td>
            </tr>
            @* строка — Покупатель *@
            <tr>
                <td><strong>Покупатель</strong></td>
                <td>Зарегистрированный пользователь. Может добавлять товары в корзину и оформлять заказы.</td>
            </tr>
            @* строка — Администратор *@
            <tr>
                <td><strong>Администратор</strong></td>
                <td>Управляет каталогом: добавляет, редактирует и удаляет товары. Управляет заказами.</td>
            </tr>
        </tbody>
    </table>
</section>

@* дополнительная информация *@
<section>
    <h3>Что планируется</h3>
    <ul>
        <li>Каталог товаров с фильтрацией и сортировкой (уже готово в базовой форме)</li>
        <li>Корзина и оформление заказов</li>
        <li>Личный кабинет покупателя</li>
        <li>Панель администратора для управления товарами</li>
        <li>Система авторизации и аутентификации (ЛР 6)</li>
    </ul>
</section>