<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
  <title>{% if settings.extra.title %}
          {{ settings.extra.title | safe }}
      {% else %}
          📡 Tech radars
      {% endif %}
  </title>
  <style>
      body {
          display: flex;
          flex-direction: column;
          align-items: center;
          height: 100vh;
          margin: 0;
      }
      ul {
          list-style-type: none;
          padding: 0px;
      }
      .link {
          color: black;
          text-decoration: none;
      }

      li a {
          min-width: 150px;
          padding: 3px 10px;
          border-radius: 20px;
          display: inline-block;
          font-size: 95%;
      }

      li a:hover {
          background-color: #eaeef8;
      }
      * {
          font-family: "Helvetiva, Museo Sans", sans-serif;
          color: #333;

          line-height: 1.6333;
      }
      main {
          display: flex;
          justify-content: center;
          height: 100%;
          min-width: 400px;
      }
      .wrapper {
          display: flex;
          flex-wrap: wrap;
          width: 90%;
          flex: 1;
      }
      .tile{
          text-align: center;
          margin: 20px;
      }
      footer {
          text-align: center;
      }
  </style>
</head>
<body>
    <h1>
        {% if settings.extra.title %}
            {{ settings.extra.title | safe }}
        {% else %}
            📡 Tech radars
        {% endif %}
    </h1>
    <main>
        <div class="wrapper">
            {% for scope in settings.extra.scopes %}
                <div class="tile">
                    <h2>{{ scope }}</h2>
                    <ul>
                        {% for radar in settings.extra.radars %}
                            {% if radar.scope === scope %}
                                <li><a class="link" href="{{ radar.scope + '/' + radar.date }}"> {{ radar.date }}</a></li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
            {% endfor %}
        </div>
    </main>
    <footer>
        {% if settings.extra.footer %}
            {{ settings.extra.footer | safe }}
        {% else %}
            {% include 'footer.njk' %}
        {% endif %}
    </footer>
</body>
