Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>List of Authors</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>Information About Authors</h1>

  <!-- Filters -->
  <div class="filters">
    <div>
      <label for="filterName">Name:</label>
      <input type="text" id="filterName" placeholder="Enter author name" />
    </div>
    <div>
      <label for="filterNationality">Nationality:</label>
      <select id="filterNationality">
        <option value="">All</option>
      </select>
    </div>
    <div>
      <label for="filterAlive">Alive:</label>
      <input type="checkbox" id="filterAlive" />
    </div>
    <div>
      <label for="filterActiveYear">Years Active:</label>
      <input type="number" id="filterActiveYear" placeholder="Enter year" />
    </div>
    <div class="clearFilters">
      <button id="clearFilters" class="btn">Clear Filters</button>
    </div>
  </div>

  <!-- Authors Table -->
  <table id="authorsTable" class="table">
    <thead>
      <tr>
        <th data-sort="id">ID</th>
        <th data-sort="name">Name</th>
        <th data-sort="birth_date">Birth Date</th>
        <th data-sort="alive">Alive</th>
        <th data-sort="age">Age</th>
        <th data-sort="nationality">Nationality</th>
        <th data-sort="bibliographyCount"># Books</th>
        <th data-sort="bibliographySummary">Bibliography</th>
        <th data-sort="yearsActive">Years Active</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <!-- Books Modal -->
  <div class="modal" id="booksModal" hidden="true">
    <div class="modal-content">
      <span class="close-btn" id="closeModal">&times;</span>
      <h2 id="booksModalTitle">Bibliography</h2>
      <table id="booksTable">
        <thead>
          <tr><th>Name</th><th>Year</th><th>Type</th></tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>

  <!-- JS -->
  <script src="script.js"></script>
</body>
</html>