<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
  <meta name="description" content="{{ subtitle }}">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">
    <div class="container">
      <div class="header-content">
        <h1 class="site-title">{{ title }}</h1>
        <p class="site-subtitle">{{ subtitle }}</p>
      </div>
      <div class="header-decoration">
        <svg viewBox="0 0 100 60" class="sweden-motif" aria-hidden="true">
          <rect x="0" y="0" width="100" height="60" fill="var(--color-accent)"/>
          <rect x="0" y="24" width="100" height="12" fill="var(--color-accent-gold)"/>
          <rect x="30" y="0" width="12" height="60" fill="var(--color-accent-gold)"/>
        </svg>
      </div>
    </div>
  </header>

  <main class="site-main">
    <div class="container">
      <section class="filter-section">
        {{ filters }}
        <div class="filter-footer">
          <p class="entry-count"><span id="visible-count">{{ entryCount }}</span> av {{ entryCount }} poster</p>
          <a href="om-markning.html" class="badges-info-link">Vad betyder märkningarna?</a>
        </div>
      </section>

      <section class="entries-section">
        <div class="entries-grid" id="entries-grid">
          {{ entries }}
        </div>
        <p class="no-results" id="no-results" hidden>Inga resultat hittades.</p>
      </section>
    </div>
  </main>

{{ footer }}

  <script src="filter.js"></script>
</body>
</html>
