{% extends "templates/one-column.html" %}

{% block meta_description %}Resources from across Ubuntu and Canonical combined into a single portal{% endblock %}

{% block title %}Resources{% endblock %}

{% block content %}

  <section class="p-strip is-shallow">
    <div class="row">
      <div class="col-6">
        <h1>Ubuntu resources</h1>
        <h5>
          Selected resources from <a href="https://blog.ubuntu.com">blog.ubuntu.com</a>
        </h5>
      </div>
    </div>
  </section>
  <section class="p-strip is-shallow u-no-padding--top"
           style="overflow-y: hidden">
    <nav class="p-tabs u-fixed-width">
      <ul class="p-tabs__list" role="tablist">
        <li class="p-tabs__item" role="presentation">
          <a href="?{% if content_slug %}content={{ content_slug }}{% endif %}"
             onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Resources', 'eventAction' : 'Navigation', 'eventLabel' : 'All', 'eventValue' : undefined });"
             class="p-tabs__link"
             role="tab"
             aria-controls="section1"
             {% if topic_slug == 'all' or topic_slug == None %}aria-selected="true"{% endif %}>All topics</a>
        </li>
        <li class="p-tabs__item" role="presentation">
          <a href="?topic=cloud-and-server{% if content_slug %}&content={{ content_slug }}{% endif %}"
             onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Resources', 'eventAction' : 'Navigation', 'eventLabel' : 'Cloud and server', 'eventValue' : undefined });"
             class="p-tabs__link"
             role="tab"
             aria-controls="section1"
             {% if topic_slug == 'cloud-and-server' %}aria-selected="true"{% endif %}>Cloud and server</a>
        </li>
        <li class="p-tabs__item" role="presentation">
          <a href="?topic=internet-of-things{% if content_slug %}&content={{ content_slug }}{% endif %}"
             onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Resources', 'eventAction' : 'Navigation', 'eventLabel' : 'Internet of things', 'eventValue' : undefined });"
             class="p-tabs__link"
             role="tab"
             aria-controls="section2"
             {% if topic_slug == 'internet-of-things' %}aria-selected="true"{% endif %}>Internet of things</a>
        </li>
        <li class="p-tabs__item" role="presentation">
          <a href="?topic=desktop{% if content_slug %}&content={{ content_slug }}{% endif %}"
             onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Resources', 'eventAction' : 'Navigation', 'eventLabel' : 'Desktop', 'eventValue' : undefined });"
             class="p-tabs__link"
             role="tab"
             aria-controls="section2"
             {% if topic_slug == 'desktop' %}aria-selected="true"{% endif %}>Desktop</a>
        </li>
        <li class="u-align-text--right u-hide--small">
          <form action="" method="get" class="p-form p-form--inline">
            <div class="p-form__group">
              <label for="full-name-inline"
                     aria-label="Filter the resources by type"
                     class="p-form__label">Filter:</label>
              <select class="js-submit-on-change p-form__control"
                      name="content"
                      aria-label="Filter by content type">
                <option value="">All content types</option>
                <option value="case-studies"
                        {% if content_slug == 'case-studies' %}selected{% endif %}>Case studies</option>
                <option value="videos" {% if content_slug == 'videos' %}selected{% endif %}>Videos</option>
                <option value="webinars"
                        {% if content_slug == 'webinars' %}selected{% endif %}>Webinars</option>
                <option value="whitepapers"
                        {% if content_slug == 'whitepapers' %}selected{% endif %}>Whitepapers</option>
              </select>
              <input type="submit" value="Send Request" class="u-hide" />
              {% if topic_slug %}<input type="hidden" name="topic" value="{{ topic_slug }}" />{% endif %}
            </div>
          </form>
        </li>
      </ul>
    </nav>
  </section>

  <div class="row u-hide--medium u-hide--large" style="margin-bottom: 2rem;">
    <form action="" method="get" class="p-form p-form--inline">
      <div class="p-form__group">
        <label for="full-name-inline"
               aria-label="Filter the resources by type"
               class="p-form__label">Filter:</label>
        <select class="js-submit-on-change p-form__control"
                name="content"
                aria-label="Filter by content type">
          <option value="">All content types</option>
          <option value="case-studies"
                  {% if content_slug == 'case-studies' %}selected{% endif %}>Case studies</option>
          <option value="videos" {% if content_slug == 'videos' %}selected{% endif %}>Videos</option>
          <option value="webinars"
                  {% if content_slug == 'webinars' %}selected{% endif %}>Webinars</option>
          <option value="whitepapers"
                  {% if content_slug == 'whitepapers' %}selected{% endif %}>Whitepapers</option>
        </select>
        <input type="submit" value="Send Request" class="u-hide" />
        {% if topic_slug %}<input type="hidden" name="topic" value="{{ topic_slug }}" />{% endif %}
      </div>
    </form>
  </div>

  <section class="p-strip is-shallow u-no-padding--top">
    {% if posts == false %}
      <div class="u-fixed-width">
        <div class="p-notification--negative">
          <div class="p-notification__content">
            <span class="p-notification__title">Error:</span>
            <p class="p-notification__message">
              The live news feed failed to load. Please <a href="https://github.com/canonical-websites/www.ubuntu.com/issues/new">report this bug</a> and our team will fix the problem as soon as&nbsp;possible.
            </p>
          </div>
        </div>
      </div>
    {% endif %}

    {% for group_slug, resources in posts.items() %}
      <div class="row u-equal-height">
        {% for resource in resources.posts %}
          <article class="p-card--{{ resource.group.slug }} col-4"
                   style="display: flex;
                          flex-direction: column">
            {% if topic %}
              <h4 class="p-muted-heading">{{ topic.name }}</h4>
            {% else %}
              <h4 class="p-muted-heading">{{ resource.group.name }}</h4>
            {% endif %}
            <hr class="p-rule--muted" />
            {% if "featuredmedia" in resource and resource.featuredmedia.source_url %}
              <a href="{{ resource.link.replace('admin.insights.ubuntu.com', 'blog.ubuntu.com') }}"
                 onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Resources', 'eventAction' : 'Clicked resource', 'eventLabel' : '{{ resource.title.rendered }}', 'eventValue' : undefined });">
                <img src="https://res.cloudinary.com/canonical/image/fetch/q_auto,f_auto,w_460/{{ resource.featuredmedia.source_url }}"
                     srcset="https://res.cloudinary.com/canonical/image/fetch/q_auto,f_auto,w_460/{{ resource.featuredmedia.source_url }} 460w,
                             https://res.cloudinary.com/canonical/image/fetch/q_auto,f_auto,w_620/{{ resource.featuredmedia.source_url }} 620w,
                             https://res.cloudinary.com/canonical/image/fetch/q_auto,f_auto,w_875/{{ resource.featuredmedia.source_url }} 875w"
                     sizes="(min-width: 1031px) 460px,
                            (max-width: 1030px) and (min-width: 876px) 460px,
                            (max-width: 875px) and (min-width: 621px) 875px,
                            (max-width: 620px) and (min-width: 461px) 620px,
                            (max-width: 460px) 460px"
                     alt="{{ resource.featuredmedia.alt_text }}" />
              </a>
              <h3 class="p-heading--4">
                <a href="{{ resource.link.replace('admin.insights.ubuntu.com', 'blog.ubuntu.com') }}">{{ resource.title.rendered | safe }}</a>
              </h3>
            {% else %}
              <h3 class="p-heading--4">
                <a href="{{ resource.link.replace('admin.insights.ubuntu.com', 'blog.ubuntu.com') }}">{{ resource.title.rendered | safe }}</a>
              </h3>
              {{ resource.excerpt.rendered | truncate(162) | safe }}
            {% endif %}
            <hr class="p-rule--muted" style="margin-top: auto;" />
            <p class="u-no-margin--bottom">
              <small>{{ resource.category.name }}</small>
            </p>
          </article>

          {% if loop.index % 3 == 0 %}
          </div>
          <div class="row u-equal-height">
          {% endif %}
        {% endfor %}
      </div>
    {% endfor %}

    {% if posts_length == 0 %}
      <div class="u-fixed-width">
        <div class="p-notification--information is-inline">
          <div class="p-notification__content">
            <span class="p-notification__title">Information:</span>
            <p class="p-notification__message">There were no results found for this category</p>
          </div>
        </div>
      </div>
    {% endif %}

    <div class="u-fixed-width">
      <ol class="p-pagination">
        {% if pagination.previous_enable %}
          <a class="p-pagination__link--previous"
             href="{{ pagination.previous_link }}">
            <span class="p-pagination__label">Previous</span>
            <span class="p-pagination__title">Go to page {{ pagination.previous_index }}</span>
          </a>
        {% endif %}
        {% if pagination.next_enable %}
          <a class="p-pagination__link--next" href="{{ pagination.next_link }}">
            <span class="p-pagination__label">Next</span>
            <span class="p-pagination__title">Go to page {{ pagination.next_index }}</span>
          </a>
        {% endif %}
      </ol>
    </div>
  </section>

  <script>
    var selects = document.querySelectorAll('.js-submit-on-change');
    selects.forEach(function(select) {
      select.addEventListener('change', function(e) {
        var form = this.closest('form');
        if (form) {
          form.submit();
        }
      });
    });
  </script>

{% endblock content %}