{# Example base template for the site #}
{# TODO: Extend or copy this in {SITE_NAME}/templates/base.html #}

<!DOCTYPE html>
{% load static %}
{% load projectroles_tags %}
{% load projectroles_common_tags %}
{% load rules %}

{# Local variables #}
{% get_django_setting 'SITE_TITLE' as site_title %}
{% get_django_setting 'SITE_SUBTITLE' as site_subtitle %}
{% get_django_setting 'PROJECTROLES_INLINE_HEAD_INCLUDE' as inline_head_include %}
{% get_django_setting 'PROJECTROLES_DISABLE_CDN_INCLUDES' as disable_cdn_includes %}
{% get_django_setting 'PROJECTROLES_CUSTOM_JS_INCLUDES' as custom_js_includes %}
{% get_django_setting 'PROJECTROLES_CUSTOM_CSS_INCLUDES' as custom_css_includes %}

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>
      {{ site_title }}{% if site_subtitle %} {{ site_subtitle }}{% endif %}:
      {% block title %}Page Title{% endblock title %}
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    {% if inline_head_include %}
      <!-- Inline head include -->
      {{ inline_head_include | safe }}
    {% endif %}

    {% block head_javascript %}
      <!-- Critical Javascript includes -->
      {# NOTE: The rest are included under the "javascript" block at the end #}
      <!-- Iconify SVG icons -->
      <script type="text/javascript" src="{% url 'config.js' %}"></script>
      <script type="text/javascript" src="{% static 'projectroles/js/iconify.min.js' %}"></script>

      {% if not disable_cdn_includes %}
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
        <![endif]-->
        <!-- JQuery -->
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <!-- Required by Bootstrap v4 -->
        <!--<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
        <!-- Shepherd -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/shepherd/1.8.1/js/shepherd.min.js"></script>
        <!-- Clipboard helper -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
      {% endif %}

      {# Custom Javascript includes #}
      {% for js_inc in custom_js_includes %}
        <script type="text/javascript" src="{{ js_inc }}"></script>
      {% endfor %}
    {% endblock head_javascript %}

    {% block css %}
      <!-- CSS includes -->
      <!-- Fix for pull-right/pull-left bug when including imports -->
      <style type="text/css">
        .pull-right {
          float: right;
        }
        .pull-left {
          float: left;
        }
      </style>
      {% if not disable_cdn_includes %}
        <!-- Bootstrap 4 CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
      {% endif %}
      {# Custom CSS includes #}
      {% for css_inc in custom_css_includes %}
        <link rel="stylesheet" type="text/css" href="{{ css_inc }}" />
      {% endfor %}

      <!-- Local CSS Includes -->
      <!-- Shepherd theme -->
      <link rel="stylesheet" type="text/css" href="{% static 'projectroles/css/shepherd-theme-sodar.css' %}" />
      <!-- Projectroles custom CSS -->
      <link rel="stylesheet" type="text/css" href="{% static 'projectroles/css/projectroles.css' %}" />
      <!-- Project CSS -->
      <link rel="stylesheet" type="text/css" href="{% static 'css/project.css' %}" />
    {% endblock css %}

    {% block head_extend %}
      {# Extended head stuff from apps goes here #}
    {% endblock head_extend %}
  </head>
  <body>
    <div class="sodar-base-container" id="sodar-base-container">
      <div class="sodar-top-container" id="sodar-top-container">
        {# Projectroles site title bar #}
        {% include 'projectroles/_site_titlebar.html' %}
      </div> <!-- /sodar-top-container -->
      <div class="sodar-content-container" id="sodar-content-container">
        {% block content %}
          <p>Use this document as a way to quick start any new project.</p>
        {% endblock content %}
      </div> <!-- /sodar-content-container -->
    </div> <!-- /sodar-base-container -->

    {# Custom template for Bootstrap4 modal #}
    {% block modal %}
      {% include 'projectroles/_modal.html' %}
    {% endblock modal %}

    <!-- Standard Javascript includes -->
    {# Include additional Javascript here #}
    {% block javascript %}
      <!-- Settings -->
      <script type="text/javascript">
        {% get_django_setting name='PROJECTROLES_BROWSER_WARNING' js=True as browser_warning %}
        window.sodarBrowserWarning = {{ browser_warning }};
      </script>
      <!-- General project Javascript -->
      <script type="text/javascript" src="{% static 'js/project.js' %}"></script>
      <!-- App alerts Javascript -->
      {% include 'projectroles/_appalerts_include.html' %}
    {% endblock javascript %}
  </body>
</html>
