{% extends "base.html" %}
  {% load static %}
  {% load readux_templatetags %}
  {% load wagtailcore_tags %}
  {% load has_user_annotations %}
  {% load user_annotation_count %}

  {% block content %}
  <div class="uk-child-width-expand@s" uk-grid>

    <div class="rx-splash">
      <ul class="readux-home-tagline uk-padding-remove-left rx-splash-item">
        <li>{{ page.tagline|richtext }}</li>
      </ul>
      <div class="rx-splash-item">
        {% if request.get_host == "readux2.ecdsdev.org" %}
        <iframe width="320" height="180" src="https://player.vimeo.com/video/374786964?x" frameborder="0"
          allow="fullscreen" allowfullscreen style="margin-top:0.5em;"></iframe>
        {% endif %}
        <p class="">Engage with digitized print materials on an open source software platform and share new thinking.
        </p>
        <img src="static/images/ecds.svg" alt="ECDS logo" class="readux-home-ecds">
      </div>
    </div>

    <div class="rx-home-right-column">
      {% if page.featured_collections.all|length != 0  %}
      <h2 class="readux-group-title">Featured Collection{{page.featured_collections.all|length|pluralize}}</h2>
      <ul class="uk-padding-remove-left">
        {% for collection in page.featured_collections.all|order_by:page.featured_collections_sort_order %}
        <li>
          <article class="uk-grid rx-article">
            <div class="rx-card-image-container uk-width-1-1 uk-width-1-4@m">
              <a alt="Thumbnail image for collection {{collection.label}}" class="rx-card-image"
                href="{% url 'collection' collection.pid %}">
                <img class="rx-title-image" alt="Thumbnail image for collection {{collection.label}}" src="/media/{{collection.thumbnail}}">
              </a>
            </div>
            <div class="rx-card-body uk-width-1-1 uk-width-3-4@m">
              <a class="nav-link" href="{% url 'collection' collection.pid %}">
                <h3 class="rx-card-title uk-margin-remove-bottom">{{ collection.label }}</h3>
                <div class="rx-title-tagline">{{collection.manifests.all|length}}
                  volume{{collection.manifests.all|length|pluralize}}
                </div>
                <p class="rx-card-text">{{ collection.summary|truncatewords_html:30|safe }}</p>
              </a>
            </div>
          </article>
        </li>
        {% endfor %}
        <!-- <a class="nav-link" href="#">
          <div class="rx-btn rx-btn-extension">Show All Featured Collections <i class="fas fa-chevron-right"></i></div>
        </a> -->
      </ul>
      {% endif %}

      {# FIXME: NEED BETTER WAY #}
      {% if page.featured_volumes.all|length != 0 %}
      <h2 class="readux-group-title">Featured Volume{{page.featured_volumes.all|length|pluralize}}</h2>
      {% for volume in page.featured_volumes.all|order_by:page.featured_volumes_sort_order %}
        <li>
          <article class="uk-grid rx-article">
            <div class="rx-card-image-container uk-width-1-1 uk-width-1-4@m">
              <a alt="First page of {{volume.label}}" class="rx-card-image"
                href="{% url 'page' volume.pid volume.canvas_set.first.pid %}">
                  <v-volume-image img-src="{{ volume.start_canvas.thumbnail_crop_tallwide }}" alt="First page of {{volume.label}}" volume-label="{{volume.label}}">
                  </v-volume-image>
              </a>
            </div>
            <div class="rx-card-body uk-width-1-1 uk-width-3-4@m">
              {% if volume.collections.exists %}
                <a class="nav-link" href="{% url 'collection' volume.collections.first.pid %}">
                  <div class="rx-btn rx-btn-collection">{{volume.collections.first.label}}</div>
                </a>
              {% endif %}
              <a class="nav-link" href="{% url 'page' volume.pid volume.canvas_set.first.pid %}">
                <h3 class="rx-card-title uk-margin-remove-bottom uk-margin-small-top">{{ volume.label|truncatechars:200 }}
                </h3>
                {# Expose annotation count when available #}
                <ul class="rx-card-text">
                  <li>Author: {{volume.author|truncatechars:100}}</li>
                  <li>Published: {{volume.published_date}} | Added: {{volume.created_at}}</li>
                  <li>
                      {% if user.is_authenticated %}
                        {% has_user_annotations volume user as result %}
                        {% if result %}
                          <span class="count-icon">
                            <span class="uk-icon" uk-icon="icon: comments; ratio: 1.5"
                              uk-tooltip="title: Number of your annotations; pos: bottom"></span>
                            <span class="count">{% user_annotation_count volume user %}</span>
                          </span>
                        {% endif %}
                      {% endif %}
                  </li>
                </ul>
              </a>
            </div>
          </article>
        </li>
      {% endfor %}
      <!-- <a class="nav-link" href="#">
        <div class="rx-btn rx-btn-extension">Show All Featured Volumes <i class="fas fa-chevron-right"></i></div>
      </a> -->
      {% endif %}



      {% if page.content_display == 'Collections' %}
      <h2 class="readux-group-title">All Collections</h2>

      <ul>
        {% for collection in page.collections %}
        <li class="uk-grid" style="margin-top:0;">
          <article class="rx-article uk-width-1-1" style="padding-left:5px;margin-top:1.5em;margin-bottom:1.5em;">
            <div class="rx-card-image-container uk-width-1-1 uk-width-1-4@m">
              <a alt="Banner image for collection {{collection.label}}" class="rx-card-image"
                style="background-image: url('https://127.0.0.1:3000/media/{{collection.header}}'); // background-position: 77% 52% !important;"></a>
            </div>
            <div class="rx-card-body uk-width-3-1" style="padding-left: 40px;">
              <a class="nav-link" href="{% url 'collection' collection.pid %}">
                <h3 class="rx-card-title uk-margin-remove-bottom">{{ collection.label }}</h3>
                <div class="rx-title-tagline">{{collection.manifests.all|length}}
                  volume{{collection.manifests.all|length|pluralize}}
                </div>
                <p class="rx-card-text">{{ collection.summary|truncatewords_html:40|safe }}</p>
              </a>
            </div>
          </article>
        </li>
        {% endfor %}

        <li class="uk-grid" style="margin-top:0;">
        <a class="nav-link uk-padding-remove" href="/{{ collectionsurl.slug }}">
          <div class="rx-btn rx-btn-extension">Show All Collections <i class="fas fa-chevron-right"></i></div>
        </a>
        </li>
      </ul>
              {% include "footer.html" %}
      {% endif %}

      {% if page.content_display == 'Volumes' %}
      <h2 class="readux-group-title">All Volumes</h2>
      {% for volume in page.volumes %}
      {% if volume.canvas_set.first.pid is null %}
      <li>
        <article class="uk-grid rx-article">
          <div class="rx-card-image-container uk-width-1-1 uk-width-1-4@m">
            <v-volume-image img-src="{{ volume.start_canvas.thumbnail_crop_tallwide }}" volume-label="{{volume.label}}"></v-volume-image>
          </div>
          <div class="rx-card-body uk-width-1-1 uk-width-3-4@m">
            {% if volume.collections.exists %}
            <a class="nav-link" href="{% url 'collection' volume.collections.first.pid %}">
              <div class="rx-btn rx-btn-collection">{{volume.collections.first.label}}</div>
            </a>
            {% endif %}
            <a class="nav-link" href="#">
              <h3 class="rx-card-title uk-margin-remove-bottom uk-margin-small-top" title="{{ volume.label }}">
                {{ volume.label|truncatechars:200 }}
              </h3>
              <div class="rx-title-tagline"></div>
              <ul class="rx-card-text">
                <li>Author: {{volume.author|truncatechars:150}}</li>
                <li>Published: {{volume.published_date}} | Added: {{volume.created_at}}</li>
                <li>
                    {% if user.is_authenticated %}
                      {% has_user_annotations volume user as result %}
                      {% if result %}
                        <span class="count-icon">
                          <span class="uk-icon" uk-icon="icon: comments; ratio: 1.5"
                            uk-tooltip="title: Number of your annotations; pos: bottom"></span>
                          <span class="count">{% user_annotation_count volume user %}</span>
                        </span>
                      {% endif %}
                    {% endif %}
                </li>
              </ul>
            </a>
          </div>
        </article>
      </li>

      {% else %}
      <li>
        <article class="uk-grid rx-article">
          <div class="rx-card-image-container uk-width-1-1 uk-width-1-4@m">
            <a class="rx-card-image" href="{% url 'page' volume.pid volume.canvas_set.first.pid %}">
              <v-volume-image img-src="{{ volume.start_canvas.thumbnail_crop_tallwide }}" volume-label="{{volume.label|truncatechars:50}}">
              </v-volume-image>
            </a>

          </div>
          <div class="rx-card-body uk-width-1-1 uk-width-3-4@m">
            {% if volume.collections.count > 0 %}
            <a class="nav-link" href="{% url 'collection' volume.collections.first.pid %}">
              <div class="rx-btn rx-btn-collection">{{volume.collections.first.label}}</div>
            </a>
            {% endif %}
            <a class="nav-link" href="{% url 'page' volume.pid volume.canvas_set.first.pid %}">
              <h3 class="rx-card-title uk-margin-remove-bottom uk-margin-small-top" title="{{ volume.label }}">{{ volume.label|truncatechars:200 }}
              </h3>
              <ul class="rx-card-text">
                <li>Author: {{volume.author|truncatechars:150}}</li>
                <li>Published: {{volume.published_date}} | Added: {{volume.created_at}}</li>
                <li>
                    {% if user.is_authenticated %}
                      {% has_user_annotations volume user as result %}
                      {% if result %}
                        <span class="count-icon">
                          <span class="uk-icon" uk-icon="icon: comments; ratio: 1.5"
                            uk-tooltip="title: Number of your annotations; pos: bottom"></span>
                          <span class="count">{% user_annotation_count volume user %}</span>
                        </span>
                      {% endif %}
                    {% endif %}
                </li>
              </ul>
            </a>
          </div>
        </article>
      </li>

      {% endif %}
      {% endfor %}

      <a class="nav-link" href="/{{ volumesurl.slug }}">
        <div class="rx-btn rx-btn-extension">Show All Volumes <i class="fas fa-chevron-right"></i></div>
      </a>
    </ul>

      {% include "footer.html" %}
      {% endif %}
    </div>
  </div>
  {% endblock %}