{% extends 'base.html' %}

{% load static %}
{% load rules %}
{% load projectroles_tags %}
{% load projectroles_common_tags %}

{% block css %}
  {{ block.super }}
  <style type="text/css">
    /* Notch visualizaton for sidebar */
    .sodar-pr-sidebar-nav-ul li.active a span.sodar-pr-sidebar-icon:after {
      content: "";
      position: absolute;
      right: 0;
      top: {{ sidebar_notch_pos }}px;
      bottom: 0;
      width: 0;
      height: 0;
      border-top: {{ sidebar_notch_size }}px solid transparent;
      border-right: {{ sidebar_notch_size }}px solid #ffffff;
      border-bottom: {{ sidebar_notch_size }}px solid transparent;
    }

    /* Padding for sidebar items */
    .sodar-pr-sidebar-nav-item {
      padding-bottom: {{ sidebar_padding }}px !important;
    }
  </style>
{% endblock %}

{% block content %}
  {% get_django_setting 'PROJECTROLES_KIOSK_MODE' as kiosk_mode %}
  {% get_django_setting 'PROJECTROLES_TEMPLATE_INCLUDE_PATH' as template_include_path %}

  {# Ensure passing CSRF token to Ajax API views #}
  {% csrf_token %}

  {# Sidebar #}
  {% if not kiosk_mode %}
    <div class="sodar-content-left" id="sodar-content-left">
      <div class="col h-100 bg-dark text-center sodar-pr-sidebar collapse show" id="sodar-pr-sidebar">
        <nav class="nav navbar-expand-lg navbar-dark bg-dark sodar-pr-sidebar-nav">
          <div class="navbar-collapse" id="sodar-pr-sidebar-navbar">
            <ul class="navbar-nav flex-column sodar-pr-sidebar-nav-ul">
              <li id="sodar-pr-nav-home" class="nav-item sodar-pr-sidebar-nav-item {% if request.resolver_match.url_name == 'home' %}active{% endif %}">
                <a class="nav-link" href="{% url 'home' %}" id="sodar-pr-nav-home-link">
                  <span class="sodar-pr-sidebar-icon">
                    <i class="iconify" data-icon="mdi:home" data-height="{{ sidebar_icon_size }}"></i>
                  </span>
                  <br />Home
                </a>
              </li>
              {% block sidebar %} {# Actual sidebar content #}
                {% include 'projectroles/_project_sidebar.html' %}
              {% endblock sidebar %}
            </ul>
          </div>
        </nav>
      </div>
    </div> <!-- /sodar-content-left -->
  {% endif %}

  <div class="sodar-content-right">
    {% get_django_setting 'PROJECTROLES_BREADCRUMB_STICKY' default=True as breadcrumb_sticky %}

    {# Sticky project breadcrumb navigation #}
    {% if breadcrumb_sticky %}
      {% include 'projectroles/_project_navi.html' %}
    {% endif %}

    <div class="sodar-app-container" id="sodar-app-container">
      {# Scrolling project breadcrumb navigation #}
      {% if not breadcrumb_sticky %}
        {% include 'projectroles/_project_navi.html' %}
      {% endif %}

      {# Django messages / site app messages #}
      {% include 'projectroles/_messages.html' %}

      {# Actual content #}
      <div class="sodar-app-content{% if project %}-project{% endif %}"
           id="sodar-app-content">
        {% block projectroles %}
          Projectroles app content here
        {% endblock projectroles %}
      </div>

      {# Footer #}
      {% template_exists template_include_path|add:'/_footer.html' as footer_exists %}
      <footer class="sodar-footer">
        {% if footer_exists %}
          {% include template_include_path|add:'/_footer.html' %}
        {% else %}
          {% include 'projectroles/_footer.html' %}
        {% endif %}
      </footer>
     </div> <!-- /sodar-app-container -->
  </div>  <!-- /sodar-content-right -->
{% endblock content %}

{% block javascript %}
  {{ block.super }}
  <!-- Projectroles Javascript -->
  <script type="text/javascript" src="{% static 'projectroles/js/projectroles.js' %}"></script>

  {# Django admin link warning #}
  {% if request.user.is_superuser %}
    {% get_admin_warning as admin_warning %}
    <script type="text/javascript">
      $(document).ready(function() {
        $('#sodar-navbar-link-admin').click(function () {
          console.debug('Clicked')
          $('#sodar-modal').find('.modal-dialog').addClass('w-50')
          $('.modal-title').text('Warning!')
          let htmlData = '{{ admin_warning|safe }}'
          $('.modal-body').html(htmlData)
          $('#sodar-modal').modal('show')
          $('#sodar-pr-btn-admin-continue').click(function () {
              $('#sodar-modal').modal('hide')
          })
        })
      })
    </script>
  {% endif %}

  <script type="text/javascript">
    tour.addStep('tour_intro', {
      title: 'Welcome to the Tour Help!',
      text: 'The tour help describes key elements on the currently opened ' +
            'page and aids you in using available features. Advance on the ' +
            'tour by clicking "Next".',
      advanceOn: '.docs-link click',
      showCancelLink: true
    })
  </script>
{% endblock javascript %}
