{% load i18n static %}<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}

<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:'rtl,ltr,auto' }}" class="h-100"
      data-theme="dark">
<head>
  <title>{% block title %}{% endblock %}</title>
  <link rel="stylesheet" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
  {% block dark-mode-vars %}
    <link rel="stylesheet" href="{% static "admin/css/dark_mode.css" %}">
    <script src="{% static "admin/js/theme.js" %}"></script>
  {% endblock %}
  {% block extrastyle %}{% endblock %}
  {% if LANGUAGE_BIDI %}
    <link rel="stylesheet" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}">{% endif %}
  {% block extrahead %}{% endblock %}
  {% block responsive %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static "admin/css/responsive.css" %}">
    {% if LANGUAGE_BIDI %}
      <link rel="stylesheet" href="{% static "admin/css/responsive_rtl.css" %}">{% endif %}
  {% endblock %}
  {% block blockbots %}
    <meta name="robots" content="NONE,NOARCHIVE">{% endblock %}
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
          crossorigin="anonymous"></script>
  <style>
      html[data-theme="light"] {
          --primary: #79aec8;
          --secondary: #417690;
          --accent: #f5dd5d;
          --primary-fg: #fff;

          --body-fg: #333;
          --body-bg: #fff;
          --body-quiet-color: #666;
          --body-loud-color: #000;

          --header-color: #ffc;
          --header-branding-color: var(--accent);
          --header-bg: var(--secondary);
          --header-link-color: var(--primary-fg);

          --breadcrumbs-fg: #c4dce8;
          --breadcrumbs-link-fg: var(--body-bg);
          --breadcrumbs-bg: var(--primary);

          --link-fg: #417893;
          --link-hover-color: #036;
          --link-selected-fg: #5b80b2;

          --hairline-color: #e8e8e8;
          --border-color: #ccc;

          --error-fg: #ba2121;

          --message-success-bg: #dfd;
          --message-warning-bg: #ffc;
          --message-error-bg: #ffefef;

          --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
          --selected-bg: #e4e4e4; /* E.g. selected table cells */
          --selected-row: #ffc;

          --button-fg: #fff;
          --button-bg: var(--primary);
          --button-hover-bg: #609ab6;
          --default-button-bg: var(--secondary);
          --default-button-hover-bg: #205067;
          --close-button-bg: #747474;
          --close-button-hover-bg: #333;
          --delete-button-bg: #ba2121;
          --delete-button-hover-bg: #a41515;

          --object-tools-fg: var(--button-fg);
          --object-tools-bg: var(--close-button-bg);
          --object-tools-hover-bg: var(--close-button-hover-bg);

          --font-family-primary: -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          system-ui,
          Roboto,
          "Helvetica Neue",
          Arial,
          sans-serif,
          "Apple Color Emoji",
          "Segoe UI Emoji",
          "Segoe UI Symbol",
          "Noto Color Emoji";
          --font-family-monospace: ui-monospace,
          Menlo,
          Monaco,
          "Cascadia Mono",
          "Segoe UI Mono",
          "Roboto Mono",
          "Oxygen Mono",
          "Ubuntu Monospace",
          "Source Code Pro",
          "Fira Mono",
          "Droid Sans Mono",
          "Courier New",
          monospace,
          "Apple Color Emoji",
          "Segoe UI Emoji",
          "Segoe UI Symbol",
          "Noto Color Emoji";
      }

      html[data-theme="dark"], html[data-theme="auto"] {
          --button-bg: var(--primary);
      }

      body {
          background-color: var(--darkened-bg);
          color: var(--body-fg);
          font-family: var(--font-family-primary);
          font-size: 0.875rem;
      }

      .form-control {
          font-size: 0.875rem;
      }

      .main {
          margin: 25px auto;
      }

      .px-3 {
          padding: 0 !important;
      }

      .header_custom {
          padding: 15px 20px;
          height: auto;
          justify-content: center;
          flex-direction: column;
          width: auto;
          display: flex;
          align-items: center;
          background: var(--header-bg);
          color: var(--header-color);
          overflow: hidden;
      }

      .branding_custom {
          display: flex;
      }

      .site-name_custom {
          margin: 0;
          padding: 0;
          font-size: 1.125rem;
          line-height: 1.2;
          margin-inline-end: 20px;
          font-weight: 300;
          color: var(--header-branding-color);
      }

      .site-name_custom a {
          color: var(--header-link-color);
      }

      .container_custom {
          max-width: 440px;
          padding-right: 0;
          padding-left: 0;
      }

      .container_custom .main_form {
          padding: 20px 20px;
      }

      .bg-dark {
          background-color: #212121 !important;
      }

      .container {
          background: var(--body-bg);
          border: 1px solid var(--hairline-color);
          border-radius: 5px;
      }

      .row > * {
          flex: 1 0;
          padding-left: 0;
          padding-right: 0;
      }

      .row {
          margin-left: 0;
          margin-right: 0;
      }

      button.theme-toggle svg {
          color: var(--header-link-color) !important;
      }

      button.theme-toggle {
          margin-top: -4px;
      }

      button.theme-toggle:hover {
          background-color: var(--header-bg);
          border: none;
      }

      .btn-primary, button {
          background-color: var(--default-button-bg);
          border: none;
          color: #fff;
      }

      .btn-primary:hover, button:hover {
          background-color: var(--default-button-hover-bg);
      }

      .btn-primary:hover, .btn-primary:active, .btn-primary:focus, button:hover {
          background-color: #609ab6;
          border-color: #609ab6;
      }

      table {
          caption-side: unset;
      }

      #container > .main {
          margin: unset;
      }

      #content-main > div > table {
          width: 100%;
      }
  </style>

</head>
<body class=" dashboard">

<div id="container">
  <div id="header">
    <div id="branding">
      <h1 id="site-name"><a href="{% url 'account_login' %}">{% trans "NOCOEM" %}</a></h1>
    </div>
    {% include 'account/snippets/user_tools.html' %}
    {% block nav-global %}{% endblock %}
  </div>

  <div class="main" id="main">
    {% block main %}
      <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
        <main class="px-3">
          {% block messages %}
            {% if messages %}
              <ul class="messagelist">{% for message in messages %}
                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}</li>
              {% endfor %}</ul>
            {% endif %}
          {% endblock messages %}
          {% block content %}
            <div class="container_custom container">
              <div class="row align-items-start">
                <div class="col-md-4">
                  {% block accounts_content %}{% endblock %}
                </div>
              </div>
            </div>
          {% endblock %}
          {% block extra_body %}{% endblock %}
        </main>
      </div>
    {% endblock main %}
  </div>

  {% block footer %}
    <footer class="mt-auto text-white-50">
    </footer>
  {% endblock %}
</div>
</body>
</html>