{% extends 'root.twig' %}

{% block css %}
  {{ parent() }}
  <!-- SimpleCSS -->
  <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
  <!-- Fork Awesome Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
  <!-- Splide -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">

  <!-- override -->
  <link rel="stylesheet" href="/css/style.css"/>
{% endblock %}

{% block js %}
  {{ parent() }}
  <!-- Splide -->
  <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
  <script src="/js/splides.js"></script>

  <!-- nav -->
  <script src="/js/nav_highlight.js"></script>
{% endblock %}

{% block body %}
  <header>
    <nav>
      <a href="/dashboard">Dashboard</a>
      <a href="/card">Cards</a>
      <!--
      <a href="/events">Events</a>
      -->
      <!--
      <a href="/news">News</a>
      -->
      <a href="https://gitlab.com/DRogueRonin/elements" target="_blank">Gitlab</a>
    </nav>
    <h1>Elements</h1>
    <p>{% block subtitle %}{% endblock %}</p>
  </header>
  <main>
    {% block main %}{% endblock %}
  </main>
  <footer>
    visit <a href="https://gitlab.com/DRogueRonin/elements" target="_blank">Gitlab</a>
  </footer>
{% endblock %}