{% 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.update_project' request.user object as can_update_project %}
{% sodar_constant 'PROJECT_TYPE_CATEGORY' as PROJECT_TYPE_CATEGORY %}

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

<div class="container-fluid sodar-page-container"
     id="sodar-pr-page-container-detail"
     data-project-type="{{ object.type }}">
  {# Links to remote projects #}
  {% if object.type == 'PROJECT' %}
    {% if 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 target_projects %}
            {% include 'projectroles/_remote_project_link.html' with site=rp.site %}
          {% 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">
          {% include 'projectroles/_remote_project_link.html' with site=object.get_source_site %}
          {% for rp in peer_projects %}
            {% include 'projectroles/_remote_project_link.html' with site=rp.site %}
          {% 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>

{% endblock projectroles %}

{% block javascript %}
  {{ block.super }}
  <script type="text/javascript">
    window.remoteLinkUrl = "{% url 'projectroles:ajax_remote_access' project=object.sodar_uuid %}";
  </script>
  {% 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>
  <!-- Project detail view specific -->
  <script type="text/javascript" src="{% static 'projectroles/js/project_detail.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 %}
