{% extends "base.html" %}

{% load static %}

{% block content %}
  <div class="text-center mb-11">
    <h2 class="text-4xl mb-3">Versions</h2>
    <p>Our libraries are ever evolving. Keep up without latest updates here.</p>
  </div>

  <!-- Current Version -->
  <div class="rounded bg-charcoal p-3 md:p-11 mb-5 mx-3">
    <div class="mb-6">
      <span class="inline uppercase text-green bg-green/10 rounded text-lg w-auto px-3 py-1">Current Version</span>
    </div>
    <div class="md:flex">
      <div class="md:w-1/4 mb-4">
        <h3 class="text-2xl">{{ current_version.name }}</h3>
        <p>Released {{ current_version.release_date|date:"n/j/y" }}</p>
      </div>
      <div class="md:w-3/4">
        <p>{{ current_version.description }}</p>
        <div class="mt-5 max-w-md sm:flex md:mt-8">
          <div class="rounded-md shadow">
            <a href="#"
               class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10">
              Download </a>
          </div>
          <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
            <a href="{% url 'version-detail' current_version.slug %}"
               class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
              Version Details > </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Current Version -->

  <!-- Past Versions -->
  <div class="rounded bg-charcoal p-3 md:p-11 mx-3 space-y-8">
    <div class="mb-6">
      <span class="inline uppercase text-orange bg-black rounded text-lg w-auto px-3 py-1">Past Versions</span>
    </div>

    {% for v in version_list %}
      {% include "versions/_past_version_list_item.html" %}
    {% endfor %}

  </div>
  <!-- End Past Versions -->

{% endblock %}