<!doctype html>
{% load static %}

<html lang="en" class="dark">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CourseField {% block head_title %}{% endblock %}</title>

    <link rel="stylesheet" href="{% static 'css/output.css' %}" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
      
      
<script>
    
    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark')
    }
    
</script>

  </head>
  <body>
  <div class="text-sm text-gray-900">
      <nav class="flex items-center px-4 py-3 bg-white justify-between shadow">
          <div class="text-gray-900 space-x-6">
                <a class="font-bold flex items-center space-x-6" href="{% url 'courses:index' %} ">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0 1 20.25 6v12A2.25 2.25 0 0 1 18 20.25H6A2.25 2.25 0 0 1 3.75 18V6A2.25 2.25 0 0 1 6 3.75h1.5m9 0h-9" />
                </svg>
                    CourseField</a>
          </div>
            <div class="text-gray-900">
                
            </div>
      </nav>
  </div>
  {% block content %}
  {% endblock %}
  {% block scripts %}
  {% endblock %}
  </body>
</html>