<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>EVAL {% block title %}{% endblock %}</title>
    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
      crossorigin="anonymous"
    />
    <link rel="icon" href="{{ url_for('static', path='/eval.png') }}" />
    {% block head %} {% endblock %}
  </head>
  <body>
    <header
      class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"
    >
      <a
        href="/"
        class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"
      >
        <svg class="bi me-2" width="40" height="32">
          <use xlink:href="#bootstrap"></use>
        </svg>
        <img
          class="logo"
          src="{{ url_for('static', path='/eval.png') }}"
          alt="logo"
        />
        <span class="fs-4">EVAL</span>
      </a>
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a
            href="https://github.com/corca-ai/EVAL"
            class="nav-link"
            target="_blank"
            >Github</a
          >
        </li>
      </ul>
    </header>
    <div class="d-flex flex-row">
      <div
        class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary"
        style="width: 280px; height: 80vh"
      >
        <ul id="nav-sidebar" class="nav nav-pills flex-column mb-auto">
          <li class="nav-item">
            <a href="/" class="nav-link link-body-emphasis">
              <svg class="bi pe-none me-2" width="16" height="16">
                <use xlink:href="#home"></use>
              </svg>
              Execute
            </a>
          </li>
          <li>
            <a href="/dashboard" class="nav-link link-body-emphasis">
              <svg class="bi pe-none me-2" width="16" height="16">
                <use xlink:href="#speedometer2"></use>
              </svg>
              Dashboard
            </a>
          </li>
        </ul>
        <hr />
      </div>

      <div class="w-100">
        <div class="container">{% block content %}{% endblock %}</div>
      </div>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
      crossorigin="anonymous"
    ></script>
    <script src="{{ url_for('static', path='/layout.js') }}"></script>
  </body>
</html>
