---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моделирование работы маркетплейса</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #333;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #eee;
        }
        .controls {
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

    <h1>Список товаров</h1>

    <div class="controls">
        <label>Сколько товаров вывести?
            <input type="number" id="countInput" value="10" min="1" max="50">
        </label>
        <button onclick="startGeneration()">Получить товары</button>

        <br><br>

        <label>Сортировка:
            <select id="sortSelect" onchange="sortFromSelect()">
                <option value="none">Без сортировки</option>
                <option value="name">По названию</option>
                <option value="quantity">По количеству</option>
            </select>
        </label>

        <button onclick="sortBy('name')">Сортировать по названию</button>
        <button onclick="sortBy('price')">Сортировать по цене</button>
        <button onclick="sortBy('quantity')">Сортировать по кол-ву</button>
    </div>

    <table>
        <thead>
            <tr>
                <th>Название</th>
                <th>Цена</th>
                <th>Кол-во</th>
                <th>Описание</th>
                <th>Бренд</th>
            </tr>
        </thead>
        <tbody id="tableBody"></tbody>
    </table>

    <script>

        let products = [];

        const brands = ['Nike', 'Adidas', 'Hugo Boss', 'Zara', 'Puma', 'Levi\'s', 'Tommy Hilfiger'];

        const alphabetLower = 'абвгдеёжзийклмнопрстуфхцчшщъыьэюя';
        const alphabetUpper = 'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ';
        const digits = '0123456789';

        function generateName() {
            let name = '';
            let randomUpperIndex = Math.floor(Math.random() * alphabetUpper.length);
            name += alphabetUpper[randomUpperIndex];
            let length = Math.floor(Math.random() * 3) + 5;
            for (let i = 1; i < length; i++) {
                if (Math.random() > 0.5) {
                    let randomLowerIndex = Math.floor(Math.random() * alphabetLower.length);
                    name += alphabetLower[randomLowerIndex];
                } else {
                    let randomDigitIndex = Math.floor(Math.random() * digits.length);
                    name += digits[randomDigitIndex];
                }
            }
            return name;
        }

        function startGeneration() {
            let count = document.getElementById('countInput').value;
            products = [];
            for (let i = 0; i < count; i++) {
                let product = {
                    name: generateName()
                };
                products.push(product);
            }
            renderTable();
        }

        function renderTable() {
            let tbody = document.getElementById('tableBody');
        }

        function sortFromSelect() {
        }

        function sortBy(criteria) {
        }

    </script>
</body>
</html>