{% extends "base.html" %}

{% load static %}

{% block content %}

  <div>
    <a class="text-orange" href="{% url "version-list" %}">Versions</a> > {{ version.name }}
  </div>

  <div class="flex mt-4">
    <div class="hidden md:block md:w-1/4">
      <ul>
        <li class="py-2"><a href="#download">Download</a></li>
        <li class="py-2"><a href="#known-issues">Known Issues</a></li>
        <li class="py-2"><a href="#new-libraries">New Libraries</a></li>
        <li class="py-2"><a href="#updated-libraries">Updated Libraries</a></li>
        <li class="py-2"><a href="#compilers">Updated Tools and Compilers Tested</a></li>
        <li class="py-2"><a href="#acknowledgements">Acknowledgements</a></li>
      </ul>
    </div>
    <div class="px-3 mx-3 md:px-0 md:mx-0 md:w-3/4">
      <div class="mb-6">
        <span class="inline uppercase {% if current_version %}text-green bg-green/10{% else %}text-orange bg-charcoal{% endif %} rounded text-lg w-auto px-3 py-1">{% if current_version %}Current Version{% else %}Past Version{% endif %}</span>
      </div>

      <div class="py-6 border-b border-slate">
        <h3 class="text-4xl">{{ version.name }}</h3>
        <h4>{{ version.release_date }}</h4>
        <p class="my-4">{{ version.description }}</p>
      </div>

      <div class="py-6 border-b border-slate">
        <h3 class="text-2xl" id="download">
          Download
          <span class="float-right text-base uppercase"><a href="#" class="text-orange">DOCUMENTATION</a></span>
        </h3>

        <!-- TODO: unhide this after fixing mobile layout -->
        <table class="hidden my-5 w-full table-auto md:block border-spacing-2">
          <thead>
            <tr>
              <th class="p-3 border border-slate">Platform</th>
              <th class="p-3 border border-slate">File</th>
              <th class="p-3 border border-slate">SHA256 Hash</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="p-3 border border-slate">Unix</td>
              <td class="p-3 border border-slate"><a href="" class="text-orange">boost_1_78_0.tar.bz2</a></td>
              <td class="p-3 border border-slate">8681f175d4bdb26c52222665793eef08490d7758529330f98d3b29dd0735bccc</td>
            </tr>
            <tr>
              <td class="p-3 border border-slate">Windows</td>
              <td class="p-3 border border-slate"><a href="" class="text-orange">boost_1_78_0.zip</a></td>
              <td class="p-3 border border-slate">f22143b5528e081123c3c5ed437e92f648fe69748e95fa6e2bd41484e2986cc3</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="py-6 border-b border-slate">
        <h3 class="text-2xl" id="known-issues">Known Issues</h3>
        <p>Content Here</p>
      </div>

      <div class="py-6 border-b border-slate">
        <h3 class="text-2xl" id="new-libraries">New Libraries</h3>
        <p>Content Here</p>
      </div>

      <div class="py-6 border-b border-slate">
        <h3 class="text-2xl" id="updated-libraries">Updated Libraries</h3>
        <p>Content Here</p>
      </div>

      <div class="py-6 border-b border-slate">
        <h3 class="text-2xl" id="updated-tools">Updated Tools</h3>
        <p>Content Here</p>
      </div>

      <div class="py-6 border-b border-slate">
        <h3 class="text-2xl" id="compilers-tested">Compilers Tested</h3>
        <p>Content Here</p>
      </div>

      <div class="py-6 border-b border-slate">
        <h3 class="text-2xl" id="acknowledgements">Acknowledgements</h3>
        <p>Content Here</p>
      </div>

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