{% extends "base.html" %}
{% from "components/components/button/macro.njk" import usaButton %}

{% macro service_list(
  heading,
  show_heading,
  organizations=[],
  services=[]
) %}
  {% if show_heading and (services or organizations) %}
    <div class="grid-row">
      <div class="grid-col-3">
        <h2>
          {{ heading }}
        </h2>
      </div>
      <div class="grid-col-9 margin-top-1">
        <ul class="usa-list usa-list--unstyled">
  {% else %}
    <ul class="usa-list usa-list--unstyled">
  {% endif %}
  {% for org in organizations|sort %}
    <li class="browse-list-item margin-y-2">
      <a href="{{ url_for('.organization_dashboard', org_id=org.id) }}" class="usa-link">{{ org.name }}</a>
      <p class="browse-list-hint margin-top-05 margin-bottom-0 text-base font-body-xs">
        {{ org.count_of_live_services }}
        live service{% if org.count_of_live_services != 1 %}s{% endif %}
      </p>
    </li>
  {% endfor %}
  {% for service in services|sort %}
    <li class="browse-list-item margin-y-2">
      <a href="{{ url_for('.service_dashboard', service_id=service.id) }}" class="usa-link">{{ service.name }}</a>
    </li>
  {% endfor %}
  {% if show_heading and (services or organizations) %}
        </ul>
      </div>
    </div>
  {% else %}
    </ul>
  {% endif %}
  <div class="keyline-block"></div>
{% endmacro %}

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

{% block maincolumn_content %}

  <h1 class="font-heading-xl">
    Choose service
  </h1>

  <nav class="browse-list">

    {% if current_user.platform_admin %}
      <div class="grid-row">
        <div class="grid-col-3">
          <h2>
            Platform admin
          </h2>
        </div>
        <ul class="usa-list usa-list--unstyled grid-col-9 margin-top-3">
          <li class="browse-list-item margin-y-2">
            <a href="{{ url_for('.organizations') }}" class="usa-link">All organizations</a>
            <p class="browse-list-hint margin-top-05 margin-bottom-0 text-base font-body-xs">
              {{ org_count|format_thousands }} organizations, {{ live_service_count|format_thousands }} live services
            </p>
          </li>
        </ul>
      </div>
      <div class="keyline-block"></div>
    {% endif %}

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

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

  </nav>

  {% if can_add_service %}
    <div class="js-stick-at-bottom-when-scrolling">
      {{ usaButton({
        "element": "a",
        "text": "Add service",
        "href": url_for('.add_service'),
        "classes": ""
      }) }}
    </div>
  {% endif %}

{% endblock %}