{% extends "withoutnav_template.html" %}
{% from "components/button/macro.njk" import govukButton %}

{% macro service_list(
  heading,
  show_heading,
  organisations=[],
  services=[]
) %}
  {% if show_heading %}
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-one-quarter">
        <h2>
          {{ heading }}
        </h2>
      </div>
      <div class="govuk-grid-column-three-quarters">
        <ul>
  {% else %}
    <ul>
  {% endif %}
  {% for org in organisations %}
    <li class="browse-list-item">
      <a href="{{ url_for('.organisation_dashboard', org_id=org.id) }}" class="govuk-link govuk-link--no-visited-state">{{ org.name }}</a>
      <p class="browse-list-hint">
        {{ org.count_of_live_services }}
        live service{% if org.count_of_live_services != 1 %}s{% endif %}
      </p>
    </li>
  {% endfor %}
  {% for service in services %}
    <li class="browse-list-item">
      <a href="{{ url_for('.service_dashboard', service_id=service.id) }}" class="govuk-link govuk-link--no-visited-state">{{ service.name }}</a>
    </li>
  {% endfor %}
  {% if show_heading %}
        </ul>
      </div>
    </div>
  {% else %}
    </ul>
  {% endif %}
  <div class="keyline-block"></div>
{% endmacro %}

{% block per_page_title %}
  Choose service
{% endblock %}

{% block maincolumn_content %}

  <h1 class="heading-large {% if current_user.has_access_to_live_and_trial_mode_services %}govuk-visually-hidden{% endif %}">
    Choose service
  </h1>

  <nav class="browse-list {% if current_user.has_access_to_live_and_trial_mode_services %}top-gutter-2-3{% endif %}">

    {% if current_user.platform_admin %}
      <div class="govuk-grid-row">
        <div class="govuk-grid-column-one-quarter">
          <h2>
            Platform admin
          </h2>
        </div>
        <ul class="govuk-grid-column-three-quarters">
          <li class="browse-list-item">
            <a href="{{ url_for('.organisations') }}" class="govuk-link govuk-link--no-visited-state">All organisations</a>
            <p class="browse-list-hint">
              {{ org_count|format_thousands }} organisations, {{ live_service_count|format_thousands }} live services
            </p>
          </li>
        </ul>
      </div>
      <div class="keyline-block"></div>
    {% endif %}

    {% if current_user.organisations %}
      {{ service_list(
        heading='Live services',
        show_heading=current_user.trial_mode_services,
        organisations=current_user.organisations,
        services=current_user.live_services_not_belonging_to_users_organisations
      ) }}
    {% else %}
      {{ service_list(
        heading='Live services',
        show_heading=(current_user.trial_mode_services and current_user.live_services),
        services=current_user.live_services
      ) }}
    {% endif %}

    {% if current_user.trial_mode_services %}
      {{ service_list(
        heading='Trial mode services',
        show_heading=(current_user.organisations or current_user.live_services),
        services=current_user.trial_mode_services
      ) }}
    {% endif %}

  </nav>

  {% if can_add_service %}
    <div class="js-stick-at-bottom-when-scrolling">
      {% if current_user.has_access_to_live_and_trial_mode_services %}
        <div class="govuk-grid-row">
          <div class="govuk-grid-column-one-quarter">
            &nbsp;
          </div>
          <div class="govuk-grid-column-three-quarters">
      {% endif %}
      {{ govukButton({
        "element": "a",
        "text": "Add a new service",
        "href": url_for('.add_service'),
        "classes": "govuk-button--secondary"
      }) }}
      {% if current_user.has_access_to_live_and_trial_mode_services %}
          </div>
        </div>
      {% endif %}
    </div>
  {% endif %}

{% endblock %}