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

{% block per_page_title %}
  All organisations
{% endblock %}

{% block beforeContent %}{% endblock %}

{% block maincolumn_content %}

    <div class="navigation-service">
      <div class="navigation-service-name govuk-!-font-weight-bold">
        &nbsp;
      </div>
      <a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a>
    </div>

    <div class="grid-row top-gutter-2-3">
      <div class="column-one-quarter">
        <h1>
          All organisations
        </h1>
      </div>
      <div class="column-three-quarters">

        {{ live_search(target_selector='.browse-list-item', show=True, form=search_form, label='Search by name') }}

        <nav class="browse-list">
          <ul>
            {% for org in organisations %}
              <li class="browse-list-item">
                <a href="{{ url_for('main.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>
                {% if not org.active %}
                  <span class="table-field-status-default heading-medium">- archived</span>
                {% endif %}
              </li>
            {% endfor %}
          </ul>
        </nav>

      </div>
    </div>
    <div class="js-stick-at-bottom-when-scrolling">
      <div class="grid-row">
        <div class="column-one-quarter">
          &nbsp;
        </div>
        <div class="column-three-quarters">
          {{ govukButton({
            "element": "a",
            "text": "New organisation",
            "href": url_for('main.add_organisation'),
            "classes": "govuk-button--secondary"
          }) }}
        </div>
      </div>
    </div>
  </div>

{% endblock %}