{% extends "base.html" %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "News" %}{% endblock %}

{% block content %}
  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
    <div class="md:w-full">
      <h1 class="text-4xl">Latest Stories</h1>
      <p class="mt-0 text-xl">
        Keep up with current information from Boost and our community. (Under construction)
      </p>

      <!-- Authenticated user actions, should be a single button with a dropdown? -->
      {% if user.is_authenticated %}
      <div class="divide-y divide-gray-300">
        <div class="flex py-5">
          <div class="py-5 w-1/6">
          {% translate "Create entry:" %}
          </div>
          <div class="py-5 w-1/6">
            <a href="{% url 'news-create' %}">
              {% translate "News" %}
            </a>
          </div>
          <div class="py-5 w-1/6">
            <a href="{% url 'news-blogpost-create' %}">
              {% translate "BlogPost" %}
            </a>
          </div>
          <div class="py-5 w-1/6">
            <a href="{% url 'news-link-create' %}">
              {% translate "Link" %}
            </a>
          </div>
          <!-- Creating polls is disabled until we extend the PollForm -->
          <!--div class="py-5 w-1/6">
            <a href="{% url 'news-poll-create' %}">
              {% translate "Poll" %}
            </a>
          </div-->
          <div class="py-5 w-1/6">
            <a href="{% url 'news-video-create' %}">
              {% translate "Video" %}
            </a>
          </div>
        </div>
      </div>
      {% endif %}

      <!-- General filters, by news type -->
      <div class="divide-y divide-gray-300">
        <div class="flex py-5">
          <div class="py-5 w-1/6">
          {% translate "Filter entries by type:" %}
          </div>
          <div class="py-5 w-1/6">
            {% url 'news' as target_url %}
            <a href="{{ target_url }}" class="py-4 px-6 rounded-md border-orange {% if request.path == target_url %}bg-gray-300{% else %}bg-orange{% endif %}">
              {% translate "News" %}
            </a>
          </div>
          <div class="py-5 w-1/6">
            {% url 'news-blogpost-list' as target_url %}
            <a href="{{ target_url }}" class="py-4 px-6 rounded-md border-orange {% if request.path == target_url %}bg-gray-300{% else %}bg-orange{% endif %}">
              {% translate "BlogPosts" %}
            </a>
          </div>
          <div class="py-5 w-1/6">
            {% url 'news-link-list' as target_url %}
            <a href="{{ target_url }}" class="py-4 px-6 rounded-md border-orange {% if request.path == target_url %}bg-gray-300{% else %}bg-orange{% endif %}">
              {% translate "Links" %}
            </a>
          </div>
          <div class="py-5 w-1/6">
            {% url 'news-poll-list' as target_url %}
            <a href="{{ target_url }}" class="py-4 px-6 rounded-md border-orange {% if request.path == target_url %}bg-gray-300{% else %}bg-orange{% endif %}">
              {% translate "Polls" %}
            </a>
          </div>
          <div class="py-5 w-1/6">
            {% url 'news-video-list' as target_url %}
            <a href="{{ target_url }}" class="py-4 px-6 rounded-md border-orange {% if request.path == target_url %}bg-gray-300{% else %}bg-orange{% endif %}">
              {% translate "Videos" %}
            </a>
          </div>
        </div>
      </div>

      <!-- News content per se -->
      <div class="divide-y divide-gray-300">
        {% for entry in entry_list %}
        <div class="flex py-4">
          <div class="py-5 w-1/6">
            <h5>{{ entry.publish_at|date:"M jS, Y" }}</h5>
          </div>
          <div class="w-5/6 text-xl">
              <p><a href="{{ entry.get_absolute_url }}">{{ entry.title }}</a></p>
              {% if entry.tag %}
              {% with url_name="news-"|add:entry.tag|add:"-list" %}
              <a href="{% url url_name %}" class="px-3 text-sm rounded-md border-orange bg-orange">
              <strong>{{ entry.tag }}</strong>
              </a>
              {% endwith %}
              {% endif %}
            <div class="space-x-8 uppercase">
            </div>
          </div>
        </div>
        {% empty %}
        <div class="flex py-4">
          <div class="w-5/6 text-xl">
            <p>
              {% translate "No entries available." %}
            </p>
            <div class="space-x-8 uppercase">
            </div>
          </div>
        </div>
        {% endfor %}
      </div>

    </div>
  </div>
{% endblock %}
