{% macro spinner() -%}
  <div class="loading">
    <div class="spinner-container">
      <svg class="spinner" data-name="c1" version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title>Greenwood Labs</dc:title></cc:Work></rdf:RDF></metadata><title>spin</title><path class="voila-spinner-color1" d="m250 405c-85.47 0-155-69.53-155-155s69.53-155 155-155 155 69.53 155 155-69.53 155-155 155zm0-275.5a120.5 120.5 0 1 0 120.5 120.5 120.6 120.6 0 0 0-120.5-120.5z"/><path class="voila-spinner-color2" d="m250 405c-85.47 0-155-69.53-155-155a17.26 17.26 0 1 1 34.51 0 120.6 120.6 0 0 0 120.5 120.5 17.26 17.26 0 1 1 0 34.51z"/></svg>
    </div>
    {{ caller() }}
  </div>
{%- endmacro %}

<!DOCTYPE html>
<html>
  <head>
    <title>Greenwood</title>
    <link rel="stylesheet" href="{{ base_url }}voila/static/materialize.min.css">

    <!-- Base CSS -->
    <style type="text/css">
      @font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: url({{base_url}}voila/static/icons_font.ttf) format('truetype');
      }

      .material-icons {
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
      }

      .brand-logo-container {
        margin-top: 32px;
        margin-bottom: 32px;
      }

      .brand-logo {
        height: 100%;
        width: 100%;
      }

      .sidenav {
        width: fit-content;
        transform: translateX(0%) !important;
      }

      .nav-wrapper {
        background-color: #E5F2E3;
      }

      .sidenav-link {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>

    <!-- Spinner CSS -->
    <style type="text/css">
      .loading {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 75vh;
          color: #E5F2E3;
          font-family: sans-serif;
      }

      .spinner {
        animation: rotation 2s infinite linear;
        transform-origin: 50% 50%;
      }

      .spinner-container {
        width: 10%;
      }

      @keyframes rotation {
        from {transform: rotate(0deg);}
        to   {transform: rotate(359deg);}
      }

      .voila-spinner-color1{
        fill: #E5F2E3;
      }

      .voila-spinner-color2{
        fill: #454B45;
      }
    </style>

    {% block head %}
    {% endblock %}

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>

  <body data-base-url="{{ base_url }}voila/">
    {% block body %}
    {% endblock %}

    <script src="{{ base_url }}voila/static/materialize.min.js"></script>
  </body>
</html>
