{% extends 'layout.twig' %}

{% block content %}

<header class="row">
  <div class="columns twelve u-text-center">
    <h1>Sentry System Monitor</h1>
  </div>
</header>

<section id="systemPages" class="row">
  <!-- CPU info page link -->
  <div class="columns six u-text-center">
    <a class="pageLink" href="cpu.html">
      <i class="fa-solid fa-microchip"></i>
      <p class="u-text-center">CPU</p>
    </a>
  </div>

  <!-- GPU info page link -->
  <div class="columns six u-text-center">
    <a class="pageLink" href="gpu.html">
      <i class="fa-solid fa-display"></i>
      <p class="u-text-center">Graphics Card</p>
    </a>
  </div>

  <!-- Memory info page link -->
  <div class="columns six u-text-center">
    <a href="memory.html" class="pageLink">
      <i class="fa-solid fa-memory"></i>
      <p class="u-text-center">Memory</p>
    </a>
  </div>

  <!-- Storage devices page link -->
  <div class="columns six u-text-center">
    <a href="storage.html" class="pageLink">
      <i class="fa-solid fa-hard-drive"></i>
      <p class="u-text-center">Storage devices</p>
    </a>
  </div>
</section>

{% endblock %}