[html]
<div class="chrono-body">
  <div class="chrono">
    <details open="">
      <summary>
        <p id="filter-header">Фильтр эпизодов и событий</p>
        <div class="filter-actions">
          <button id="reset-filters">Сбросить фильтры</button>
        </div>
      </summary>

      <div class="episode-filter" data-component="filter">
        <div class="filter-options">
          <span>Показать:</span>
          <ul id="include-filters">
            <!-- JavaScript будет генерировать фильтры здесь -->
          </ul>
        </div>

        <div class="filter-options exclude-options">
          <span>Скрыть:</span>
          <ul id="exclude-filters">
            <!-- JavaScript будет генерировать фильтры здесь -->
          </ul>
        </div>
        <div class="filter-search">
          <label>
            Поиск:
            <br />
            <input
              type="text"
              id="search-input"
              placeholder="Введите текст для поиска..."
            />
          </label>
        </div>
      </div>
    </details>

    <div class="episode-timeline" data-component="timeline">
      <!-- Эпизоды будут собираться из специальных контейнеров -->
    </div>
  </div>

  <div class="episode-form-container">
    <details>
      <summary>
        <p id="generator-header">Добавить новый эпизод</p>
      </summary>
      <form id="episode-form">
        <!-- Обязательные поля -->
        <div class="form-group">
          <label for="episode-date">Дата (ДД-ММ-ГГГГ)*:</label>
          <input type="date" id="episode-date" name="episode-date" required />
        </div>
        <div class="form-group">
          <label for="episode-title">Название эпизода*:</label>
          <input type="text" id="episode-title" name="episode-title" required />
        </div>
        <div class="form-group">
          <label for="episode-description">Описание*:</label>
          <textarea
            id="episode-description"
            name="episode-description"
            required
          ></textarea>
        </div>
        <div class="form-group">
          <label for="episode-link">Ссылка:</label>
          <input type="url" id="episode-link" name="episode-link" />
        </div>
        <!-- Категории -->
        <div class="form-group">
          <span>Категории*:</span>
          <div id="category-checkboxes">
            <!-- Чекбоксы будут сгенерированы здесь -->
          </div>
        </div>
        <div class="form-group">
          <button type="submit">Сгенерировать код эпизода</button>
        </div>
      </form>
      <div class="generated-code-container">
        <label for="generated-code">Сгенерированный код эпизода:</label>
        <textarea id="generated-code" readonly></textarea>
        <button id="copy-code-button">Скопировать код</button>
      </div>
    </details>
  </div>

  <div id="user-episodes">
    <li
  class="episode-item"
  data-category="plot Mondstadt"
  data-date="2021-07-15"
>
  <div class="episode-header">
    <div class="episode-line-1">
      <span class="episode-day">15</span>
      <a href="https://wondersofworld.rusff.me/" class="episode-title">Путешествие по Долине Ветра</a>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum massa nec fermentum consectetur.</p>
    <p>Участники: Venti, Jean</p>
  </div>
</li>
<li
  class="episode-item"
  data-category="in-progress Liyue"
  data-date="2022-08-10"
>
  <div class="episode-header">
    <div class="episode-line-1">
      <span class="episode-day">10</span>
      <a href="https://wondersofworld.rusff.me/" class="episode-title">Секреты Звёздной обители</a>
    </div>
    <p>Nullam ac urna eu felis dapibus condimentum sit amet a augue.</p>
    <p>Участники: Ningguang, Xiao</p>
  </div>
</li>
<li
  class="episode-item"
  data-category="completed Snezhnaya"
  data-date="2023-05-20"
>
  <div class="episode-header">
    <div class="episode-line-1">
      <span class="episode-day">20</span>
      <a href="https://wondersofworld.rusff.me/" class="episode-title">Вызов Архонтов</a>
    </div>
    <p>Praesent ut ligula non mi varius sagittis. Curabitur turpis.</p>
    <p>Участники: Tartaglia, La Signora</p>
  </div>
</li>
<li
  class="episode-item"
  data-category="unfinished Abyss"
  data-date="2023-05-25"
>
  <div class="episode-header">
    <div class="episode-line-1">
      <span class="episode-day">25</span>
      <a href="https://wondersofworld.rusff.me/" class="episode-title">Тайны Бездны</a>
    </div>
    <p>Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.</p>
    <p>Участники: Dainsleif, Kaeya</p>
  </div>
</li>
<li
  class="episode-item"
  data-category="plot Inazuma"
  data-date="2024-09-05"
>
  <div class="episode-header">
    <div class="episode-line-1">
      <span class="episode-day">05</span>
      <a href="https://wondersofworld.rusff.me/" class="episode-title">Легенда об Острове Ябу</a>
    </div>
    <p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
    <p>Участники: Ayaka, Thoma</p>
  </div>
</li>
<li
  class="episode-item"
  data-category="in-progress Sumeru"
  data-date="2024-09-15"
>
  <div class="episode-header">
    <div class="episode-line-1">
      <span class="episode-day">15</span>
      <a href="https://wondersofworld.rusff.me/" class="episode-title">Загадки Золотого яблока</a>
    </div>
    <p>Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
    <p>Участники: Alhaitham, Nahida</p>
  </div>
</li>
<li
  class="episode-item"
  data-category="completed Fontaine"
  data-date="2022-11-30"
>
  <div class="episode-header">
    <div class="episode-line-1">
      <span class="episode-day">30</span>
      <a href="https://wondersofworld.rusff.me/" class="episode-title">Песни Вольного Города</a>
    </div>
    <p>In consectetuer turpis ut velit. Nulla sit amet est.</p>
    <p>Участники: Lyney, Lynette</p>
  </div>
</li>
<li
  class="episode-item"
  data-category="unfinished Natlan"
  data-date="2021-12-01"
>
  <div class="episode-header">
    <div class="episode-line-1">
      <span class="episode-day">01</span>
      <a href="https://wondersofworld.rusff.me/" class="episode-title">Пламя Натлана</a>
    </div>
    <p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p>
    <p>Участники: Xiangling, Diluc</p>
  </div>
</li>
<li
  class="episode-item"
  data-category="plot Liyue"
  data-date="2023-06-18"
>
  <div class="episode-header">
    <div class="episode-line-1">
      <span class="episode-day">18</span>
      <a href="https://wondersofworld.rusff.me/" class="episode-title">Тропа Дракона</a>
    </div>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
    <p>Участники: Zhongli, Hu Tao</p>
  </div>
</li>
<li
  class="episode-item"
  data-category="in-progress Mondstadt"
  data-date="2023-06-25"
>
  <div class="episode-header">
    <div class="episode-line-1">
      <span class="episode-day">25</span>
      <a href="https://wondersofworld.rusff.me/" class="episode-title">Буря в Инадзуме</a>
    </div>
    <p>Fusce a quam. Etiam ut purus mattis mauris sodales aliquam.</p>
    <p>Участники: Lisa, Razor</p>
  </div>
</li>

  </div>
</div>
[/html]