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

{% load projectroles_common_tags %}

{% block title %}Remote Sites{% endblock title %}

{% block css %}
  {{ block.super }}
  <style type="text/css">
    @media screen and (max-width: 1200px) {
      .table#sodar-pr-remote-site-table thead tr th:nth-child(3),
      .table#sodar-pr-remote-site-table tbody tr td:nth-child(3),
      .table#sodar-pr-remote-site-table thead tr th:nth-child(5),
      .table#sodar-pr-remote-site-table tbody tr td:nth-child(5) {
        display: none;
      }
    }
    @media screen and (max-width: 900px) {
      .table#sodar-pr-remote-site-table thead tr th:nth-child(2),
      .table#sodar-pr-remote-site-table tbody tr td:nth-child(2) {
        display: none;
      }
    }
  </style>
{% endblock css %}

{% block projectroles %}

{% get_django_setting 'PROJECTROLES_SITE_MODE' as site_mode %}

<div class="row sodar-subtitle-container">
  <h2><i class="iconify" data-icon="mdi:cloud"></i> Remote Sites</h2>
  {% if site_mode == 'SOURCE' or not sites %}
    <a role="button"
       class="btn btn-primary ml-auto"
       id="sodar-pr-remote-site-add-btn"
       href="{% url 'projectroles:remote_site_create' %}">
      <i class="iconify" data-icon="mdi:plus-thick"></i>
      {% if site_mode == 'TARGET' %}
        Set Source Site
      {% else %}
        Add Target Site
      {% endif %}
    </a>
  {% endif %}
</div>

<div class="container-fluid sodar-page-container">
  {% if sites.count == 0 %}
    <div class="alert alert-info">
      {% if site_mode == 'SOURCE' %}
        No target sites have been added.
      {% else %}
        A source site has not been set.
      {% endif %}
    </div>
  {% else %}
    <div class="card">
      <div class="card-header">
        <h4>
          {% if site_mode == 'SOURCE' %}
            <i class="iconify" data-icon="mdi:cloud-upload"></i> Target Sites
          {% else %}
            <i class="iconify" data-icon="mdi:cloud-download"></i> Source Site
          {% endif %}
        </h4>
      </div>
      <div class="card-body p-0">
        <table class="table table-striped sodar-card-table"
               id="sodar-pr-remote-site-table">
          <thead>
            <tr>
              <th>Name</th>
              <th>URL</th>
              <th class="text-right">{% get_display_name 'PROJECT' title=True plural=True %}</th>
              <th>Token</th>
              <th>Accessed</th>
              {% if site_mode == 'SOURCE' %}
                <th>Visible</th>
              {% endif %}
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for site in sites %}
              {% include 'projectroles/_remote_site_list_item.html' %}
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  {% endif %}

  <div class="alert alert-info">
    Your site is in <code>{{ site_mode }}</code> mode.
  </div>

  {% get_django_setting 'PROJECTROLES_ALLOW_LOCAL_USERS' as allow_local_users %}
  {% if site_mode == 'TARGET' and allow_local_users %}
    <div class="alert alert-warning">
      <code>PROJECTROLES_ALLOW_LOCAL_USERS</code> is enabled in site
      configuration. Please note that this will allow synchronizing project
      roles to local non-LDAP users based on the user name. You should
      personally ensure that the users in question are authorized for these
      roles. Furthermore, only roles for existing local users will be
      synchronized. New local users will have to be added manually through the
      Django admin or shell.
    </div>
  {% endif %}
</div>

{% endblock projectroles %}

{% block javascript %}
  {{ block.super }}
  <!-- Tour content -->
  {% get_django_setting 'PROJECTROLES_SITE_MODE' as site_mode %}
  <script type="text/javascript">
    tourEnabled = true
    tour.addStep('remote_sites', {
      title: 'Remote Sites',
      text: 'This view enables you to manage remote sites, which are used to ' +
            'synchronize {% get_display_name 'PROJECT' plural=True %} and ' +
            'member access between multiple sites.',
      advanceOn: '.docs-link click',
      showCancelLink: true
    })
    {% if site_mode == 'SOURCE' %}
    tour.addStep('site_mode_source', {
      title: 'This Is a Source Site',
      text: 'Your site has been set up in the SOURCE mode. It can act as the ' +
            'source to synchronize ' +
            '{% get_display_name 'PROJECT' plural=True %} and member access' +
            'to other TARGET sites. You can add an arbitrary amount of ' +
            'TARGET sites for this site.',
      advanceOn: '.docs-link click',
      showCancelLink: true
    })
    tour.addStep('site_btn_add_source', {
      title: 'Add Target Site',
      text: 'Click on this button to add a new target site.',
      advanceOn: '.docs-link click',
      attachTo: '#sodar-pr-remote-site-add-btn left',
      showCancelLink: true
    })
    if ($('#sodar-pr-remote-site-table').length) {
      tour.addStep('site_table_source', {
        title: 'Target Site Table',
        text: 'This table lists the existing target sites for this source ' +
              'site.',
        advanceOn: '.docs-link click',
        attachTo: '#sodar-pr-remote-site-table top',
        showCancelLink: true
      })
    }
    {% else %} {# site_mode == 'TARGET' #}
    tour.addStep('site_mode_target', {
      title: 'This Is a Target Site',
      text: 'Your site has been set up in the TARGET mode. You can set ' +
            'exactly one SOURCE site from which ' +
            '{% get_display_name 'PROJECT' plural=True %} and member access' +
            'are synchronized to this site.',
      advanceOn: '.docs-link click',
      showCancelLink: true
    })
    if ($('#sodar-pr-remote-site-add-btn').length) {
      tour.addStep('site_btn_add_target', {
        title: 'Set Source Site',
        text: 'Click on this button to set a source site.',
        advanceOn: '.docs-link click',
        attachTo: '#sodar-pr-remote-site-add-btn left',
        showCancelLink: true
      })
    }
    if ($('#sodar-pr-remote-site-table').length) {
        tour.addStep('site_table_target', {
            title: 'Source Site',
            text: 'The currently set source site can be seen here.',
            advanceOn: '.docs-link click',
            attachTo: '#sodar-pr-remote-site-table top',
            showCancelLink: true
        });
    }
    {% endif %}
    if ($('.sodar-pr-remote-site-row').length) {
      tour.addStep('site_item_title', {
        title: 'Site Title',
        text: 'The title of a remote site can be seen here. In case of a ' +
              'target site, the title links to the project access management ' +
              'form.',
        advanceOn: '.docs-link click',
        attachTo: '.sodar-pr-remote-site-title top',
        showCancelLink: true
      })
      if ($('.sodar-pr-remote-site-desc').length) {
        tour.addStep('site_item_desc', {
          title: 'Site Description',
          text: 'An optional description for the site can be seen by ' +
                'clicking this icon.',
          advanceOn: '.docs-link click',
          attachTo: '.sodar-pr-remote-site-desc top',
          showCancelLink: true
        })
      }
      tour.addStep('site_item_count', {
        title: 'Site Project Count',
        text: 'The amount of projects currently synchronized to/from this ' +
              'site are displayed here.',
        advanceOn: '.docs-link click',
        attachTo: '.sodar-pr-remote-site-count top',
        showCancelLink: true
      })
      tour.addStep('site_item_secret', {
        title: 'Site Token',
        text: 'The secret token for the site is displayed here. This ' +
              'secret needs to be shared between sites to enable sync. ' +
              'Clicking the button copies the secret into your clipboard. ',
        advanceOn: '.docs-link click',
        attachTo: '.sodar-pr-remote-site-secret top',
        showCancelLink: true
      })
      tour.addStep('site_item_access', {
        title: 'Last Accessed Date',
        text: 'This column displays the date and time the site was last ' +
              'accessed for remote sync, or "Never" if sync is yet to be ' +
              'performed.',
        advanceOn: '.docs-link click',
        attachTo: '.sodar-pr-remote-site-access top',
        showCancelLink: true
      })
      tour.addStep('site_item_visible', {
        title: 'Site Visibility',
        text: 'This column displays whether the site is displayed to ' +
              'regular users in the UI. For sites for e.g. testing or ' +
              'staging, this may be disabled.',
        advanceOn: '.docs-link click',
        attachTo: '.sodar-pr-remote-site-visible left',
        showCancelLink: true
      })
    }
    if ($('.sodar-pr-remote-site-dropdown').length) {
      tour.addStep('site_item_dropdown', {
        title: 'Site Dropdown',
        text: 'Through this dropdown you can access functionality to modify ' +
              'the site and configure project sync.',
        advanceOn: '.docs-link click',
        attachTo: '.sodar-pr-remote-site-dropdown left',
        showCancelLink: true
      })
    }
  </script>
{% endblock javascript %}
