{% extends 'projectroles/base.html' %}

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

{% block title %}Project {{ object.title }}{% endblock title %}

{% block projectroles %}

{% has_perm 'projectroles.view_project' request.user object as can_view_project %}
{% has_perm 'projectroles.update_project' request.user object as can_update_project %}
{% has_perm 'projectroles.view_hidden_projects' request.user object as can_view_hidden_projects %}
{% sodar_constant 'PROJECT_TYPE_CATEGORY' as PROJECT_TYPE_CATEGORY %}

{% if can_view_project %}
  {% include 'projectroles/_project_header.html' %}

  <div class="container-fluid sodar-page-container">
    {# Links to remote projects #}
    {% if object.type == 'PROJECT' %}
      {% get_visible_projects target_projects can_view_hidden_projects as visible_target_projects %}
      {% if visible_target_projects %}
        <div class="card" id="sodar-pr-details-card-remote">
          <div class="card-header">
            <h4>
              <i class="iconify" data-icon="mdi:cloud"></i>
              {% get_display_name object.type title=True %} on Other Sites
            </h4>
          </div>
          <div class="card-body pb-2 mr-2">
            {% for rp in visible_target_projects %}
              <a class="btn {% if rp.site.user_display %}btn-info{% else %}btn-secondary{% endif %} mr-1 mb-1"
                href="{{ rp.site.get_url }}{% url 'projectroles:detail' project=object.sodar_uuid %}"
                role="button"
                title="{% if rp.site.description %}{{ rp.site.description }}{% endif %}"
                data-toggle="tooltip"
                target="_blank">
                <i class="iconify" data-icon="mdi:cloud-outline"></i> {{ rp.site.name }}
              </a>
            {% endfor %}
          </div>
        </div>

      {% elif object.is_remote %}
        <div class="card" id="sodar-pr-details-card-remote">
          <div class="card-header">
            <h4><i class="iconify" data-icon="mdi:cloud"></i> {% get_display_name object.type title=True %} on Other Sites</h4>
          </div>
          <div class="card-body pb-2 mr-2">
            <a class="btn btn-info mb-1 sodar-pr-link-remote sodar-pr-link-remote-master"
                href="{{ object.get_source_site.get_url }}{% url 'projectroles:detail' project=object.sodar_uuid %}"
                role="button"
                title="{% if object.get_source_site.description %}{{ object.get_source_site.description }}{% endif %}"
                data-toggle="tooltip"
                target="_blank">
              <i class="iconify" data-icon="mdi:cloud-outline"></i> {{ object.get_source_site.name }} (Master Project)
            </a>
            {% get_visible_projects peer_projects can_view_hidden_projects as visible_peer_projects %}
            {% for peer_p in visible_peer_projects %}
              <a class="btn btn-info mb-1 sodar-pr-link-remote sodar-pr-link-remote-peer"
                  href="{{ peer_p.site.get_url }}{% url 'projectroles:detail' project=peer_p.sodar_uuid %}"
                  role="button"
                  title="{% if peer_p.site.description %}{{ peer_p.site.description }}{% endif %}"
                  data-toggle="tooltip"
                  target="_blank">
                <i class="iconify" data-icon="mdi:cloud-outline"></i> {{ peer_p.site.name }}
              </a>
            {% endfor %}
          </div>
        </div>
      {% endif %}
    {% endif %}

    {# README #}
    <div class="card" id="sodar-pr-details-card-readme">
      <div class="card-header">
        <h4><i class="iconify" data-icon="mdi:book-open-page-variant"></i> ReadMe</h4>
      </div>
      <div class="card-body">
        {% if object.readme.rendered|length > 0 %}
          {% autoescape off %}
            {% render_markdown object.readme.raw %}
          {% endautoescape %}
        {% else %}
          <p>
            No ReadMe is currently set for this {% get_display_name object.type title=False %}.
            {% if can_update_project %}
             <a href="{% url 'projectroles:update' project=object.sodar_uuid %}#div_id_readme">You can update the ReadMe here</a>.
            {% endif %}
          </p>
        {% endif %}
      </div>
    </div>

    {# Subprojects #}
    {% if object.type == 'CATEGORY' %}
      {% include 'projectroles/_project_list.html' with parent=object %}
    {% endif %}

    {# App Plugin Cards #}
    {% for plugin in app_plugins %}
      {% is_app_visible plugin project request.user as app_visible %}
      {% if app_visible %}
        <div class="card sodar-pr-app-card" id="sodar-pr-app-item-{{ plugin.name }}">
          <div class="card-header">
            <h4>
              <i class="iconify" data-icon="{{ plugin.icon }}"></i>
              {% if plugin.details_title %}
                {{ plugin.details_title }}
              {% else %}
                {{ plugin.title }}
              {% endif %}
              <span class="pull-right">
                {% get_info_link plugin.description as info_link %}
                {{ info_link | safe }}
              </span>
            </h4>
          </div>
          {% if plugin.details_template %}
            <div class="card-body p-0">
              {% include plugin.details_template %}
            </div>
          {% else %}
            <div class="card-body text-center">
              <p class="text-danger"><em>No app card template found</em></p>
            </div>
          {% endif %}
        </div>
      {% endif %}
    {% endfor %}
  </div>

{% else %}
  <div class="alert alert-danger" role="alert">
    Insufficient permissions for viewing {% get_display_name 'PROJECT' title=False %}!
  </div>
{% endif %}

{% endblock projectroles %}

{% block javascript %}
  {{ block.super }}
  {% if object.type == 'CATEGORY' %}
    <!-- Project list -->
    <script type="text/javascript" src="{% static 'projectroles/js/project_list.js' %}"></script>
  {% endif %}
  <!-- Project starring -->
  <script type="text/javascript" src="{% static 'projectroles/js/project_star.js' %}"></script>

  <!-- Tour content -->
  <script type="text/javascript">
    tourEnabled = true;
    if ($('#sodar-pr-project-list').length) {
        tour.addStep('project_type_note', {
            title: 'Note on ' +
                   '{% get_display_name 'CATEGORY' plural=True title=True %} ',
            text: '{% get_display_name 'CATEGORY' plural=True title=True %} ' +
                  'are limited versions of ' +
                  '{% get_display_name 'PROJECT' plural=True %} with fewer ' +
                  'but similar features. The latter term may be used in the ' +
                  'tour help for both types when applicable. Important ' +
                  'differences between the two will be noted. ',
            advanceOn: '.docs-link click',
            showCancelLink: true
        });
    }
    tour.addStep('project_nav', {
        title: '{% get_display_name 'PROJECT' title=True %} Sidebar',
        text: 'From this sidebar you can access apps and actions of the ' +
              'currently selected {% get_display_name 'PROJECT' %}.',
        attachTo: '#sodar-pr-sidebar right',
        advanceOn: '.docs-link click',
        showCancelLink: true
    });
    if ($('#sodar-pr-details-card-remote').length) {
        tour.addStep('project_remote_card', {
            title: 'Links to {% get_display_name 'PROJECT' title=True %} on ' +
                   'Remote Sites',
            text: 'If the {% get_display_name 'PROJECT' %} is also ' +
                  'available on other sites, links to it on those sites can ' +
                  'be found here.',
            attachTo: '#sodar-pr-details-card-remote top',
            advanceOn: '.docs-link click',
            showCancelLink: true
        });
    }
    if ($('#sodar-pr-details-card-readme').length) {
        tour.addStep('project_readme_card', {
            title: '{% get_display_name 'PROJECT' title=True %} ReadMe',
            text: 'The {% get_display_name 'PROJECT' %} ReadMe document ' +
                  'is displayed here. It can be used for e.g. pinning ' +
                  'important links and updates for members.',
            attachTo: '#sodar-pr-details-card-readme top',
            advanceOn: '.docs-link click',
            showCancelLink: true
        });
    }
    if ($('#sodar-pr-project-list').length) {
        tour.addStep('project_list', {
            title: '{% get_display_name 'PROJECT' title=True %} List',
            text: 'The list of {% get_display_name 'CATEGORY' plural=True %} ' +
                  'and {% get_display_name 'PROJECT' plural=True %} under ' +
                  'this {% get_display_name 'CATEGORY' %} is presented here. ' +
                  'It works similarly to the list in your home view.',
            advanceOn: '.docs-link click',
            attachTo: '#sodar-pr-project-list top',
            showCancelLink: true
        });
    }
    if ($('.sodar-pr-app-card').length) {
        tour.addStep('project_app_cards', {
            title: '{% get_display_name 'PROJECT' title=True %} App Overviews',
            text: 'Overviews of {% get_display_name 'PROJECT' %} apps and ' +
                  'data are presented here.',
            attachTo: '.sodar-pr-app-card top',
            advanceOn: '.docs-link click',
            showCancelLink: true
        });
    }
    tour.addStep('project_star', {
        title: '{% get_display_name 'PROJECT' title=True %} Starring',
        text: 'Using this link you can "star" a ' +
              '{% get_display_name 'PROJECT' %} to add it in your ' +
              'favourites. Starred ' +
              '{% get_display_name 'PROJECT' plural=True %} are highlighted ' +
              'and can be listed on the home page with a shortcut. To ' +
              '"unstar" a {% get_display_name 'PROJECT' %}, click on the ' +
              'link again.',
        attachTo: '#sodar-pr-link-project-star bottom',
        advanceOn: '.docs-link click',
        showCancelLink: true
    });
    if ($('#sodar-pr-btn-copy-uuid').length) {
        tour.addStep('project_copy_uuid', {
            title: 'Copy {% get_display_name 'PROJECT' title=True %} UUID',
            text: 'Click on this link to copy the ' +
                  '{% get_display_name 'PROJECT' %} UUID into your clipboard.',
            attachTo: '#sodar-pr-btn-copy-uuid bottom',
            advanceOn: '.docs-link click',
            showCancelLink: true
        });
    }
  </script>
{% endblock javascript %}
