website-v2/templates/libraries/detail.html

{% extends "base.html" %}

{% load static %}

{% block content %}
  <!-- Breadcrumb used on filtered views -->
  <div class="p-3 md:p-0">
    <a class="text-orange" href="{% if version_slug %}{% url 'libraries-by-version' version_slug %}{% else %}{% url 'libraries' %}{% endif %}">Libraries{% if version_name %} ({{ version.name }}){% endif %}</a> > <a class="text-orange" href="{% url 'libraries' %}">Specific</a> > <span class="capitalize">{{ object.name }}</span>
  </div>
  <!-- end breadcrumb -->

  <div class="flex mt-4">
    <div class="md:w-1/4 hidden md:block">
      <ul>
        <li class="py-2"><a href="#overview">Overview</a></li>
        <li class="py-2"><a href="#reviews">Reviews</a></li>
        <li class="py-2"><a href="#discussion">Forum Discussion</a></li>
      </ul>
    </div>

    <div class="md:w-3/4 px-3 md:px-0 mx-3 md:mx-0">

      <!-- Overview -->
      <div class="border-b border-slate pb-16 mb-16">
        <div class="pb-6">
          <h3 class="text-4xl capitalize" id="overview">{{ object.name }}</h3>
        </div>
        <p>{{ object.description }}</p>

        <div class="uppercase mt-4 md:mt-11 max-w-md md:flex space-y-3 md:space-y-0 md:space-x-3 text-sm">
          <a href="#" class="inline-block text-orange border border-slate rounded-md py-3 px-6">Documentation</a>
          <a href="{{ object.github_url }}" class="inline-block text-orange border border-slate rounded-md py-3 px-6">Github</a>
        </div>

        <div class="md:flex mt-4 md:mt-11 py-6 justify-between">
          <div>
            <h3 class="text-2xl">Categories</h3>
            {% for c in object.categories.all %}
            <a href="{% url 'libraries-by-category' category=c.slug %}" class="text-orange">{{ c.name }}</a>{% if not forloop.last %}, {% endif %}
            {% endfor %}
          </div>

          <div>
            <h3 class="text-2xl">Minimum C++ Version</h3>
            {{ object.cpp_standard_minimum }}
          </div>

          <div>
            <h3 class="text-2xl">Active Development</h3>
            <div class="text-orange">{% if object.active_development %}Yes{% else %}No{% endif %}</div>
            <p>Last Update: {{ object.last_github_update|date:"F j, Y"}}</p>
          </div>
        </div>

        <div class="mt-4 md:mt-11 py-6">
          <h3 class="text-2xl mb-4">Level of Activity</h3>
          <div class="bg-charcoal rounded h-6">
            <!-- TODO: Change the width to use a percent of activity -->
            <div class="w-3/4 bg-gradient-to-r from-green to-orange h-6 rounded"></div>
          </div>
        </div>

        <div class="md:flex my-4 md:my-11 py-6 md:justify-between">
          <div class="py-6">
            <h3 class="text-2xl mb-1">Closed Pull Requests</h3>
            {{ closed_prs_count }}
          </div>

          <div class="py-6">
            <h3 class="text-2xl mb-1">Open Issues</h3>
            {{ open_issues_count }}
          </div>

          <div class="py-6">
            <h3 class="text-2xl mb-1">Commits Per Release</h3>
            <p>ZZ</p>
          </div>
        </div>

        <div class="md:flex md:py-11 md:space-x-11">
          <div class="py-6">
            <h3 class="text-2xl mb-4">Authors</h3>
            <div class="space-y-3">
              {% for author in object.authors.all %}
                <div>
                  {% if author.image.url %}
                    <img src="{{ author.image.url }}" alt="user" class="inline w-[47px] rounded mr-2" />
                  {% else %}
                    <i class="fas fa-user text-5xl mr-2 text-white/60"></i>
                  {% endif %}
                  {{ author.get_full_name }}
                </div>
              {% endfor %}
            </div>
          </div>
          <div class="py-6">
            <h3 class="text-2xl mb-4">Maintainers</h3>
            <div class="space-y-3">
              {% for maintainer in object.maintainers.all %}
                <div>
                  {% if maintainer.image.url %}
                    <img src="{{ maintainer.image.url }}" alt="user" class="inline w-[47px] rounded mr-2" />
                  {% else %}
                    <i class="fas fa-user text-5xl mr-2 text-white/60"></i>
                  {% endif %}
                  {{ maintainer.get_full_name }}
                </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
      <!-- end overview -->

      <!-- Review -->
      <div class="border-b border-slate pb-16 mb-16">
        <h3 class="text-4xl" id="reviews">Review</h3>
        <p>Date of Review: 10/31/20</p>
        <div class="md:flex mt-11 justify-between">
          <div>
            <h3 class="text-2xl">ACCEPT Reviews:</h3>
            <p>15 <a href="#" class="text-orange">View List</a></p>
            <h3 class="text-2xl mt-5">REJECT Reviews:</h3>
            <p>3 <a href="#" class="text-orange">View List</a></p>
            <div class="mt-11"><a href="#" class="text-orange border border-slate rounded-md py-2 px-4">Review Results</a></div>
          </div>

          <div class="py-11 md:py-0">
            <h3 class="text-2xl mb-4">Review Manager</h3>
            <div class="space-y-3">
              <div><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-5" /> Glen Fernandes</div>
            </div>
          </div>

          <div class="py-3 md:py-0">
            <h3 class="text-2xl mb-4">Reviewers</h3>
            <div class="space-y-3">
              <div><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-5" /> Glen Fernandes</div>
              <div><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-5" /> Glen Fernandes</div>
            </div>
          </div>
        </div>
      </div>
      <!-- end review -->

      <!-- Discussions -->
      <div class="pb-6">
        <h3 class="text-4xl mb-11" id="discussion">Discussions</h3>

        <div class="my-4 md:my-0 rounded bg-charcoal px-3 md:px-11 py-5">
          <div class="flex justify-between mb-6">
            <span class="inline uppercase text-green bg-green/10 rounded text-lg w-auto px-3 py-1">Forum Discussions</span>
          </div>
          <div class="divide-y divide-slate space-y-8">
            <div class="pt-6">
              <h3 class="text-xl">Topic of discussion headline from the Forum</h3>
              <div class="mt-3"><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-3" /> Name of Author</div>
            </div>
            <div class="pt-6">
              <h3 class="text-xl">Topic of discussion headline from the Forum</h3>
              <div class="mt-3"><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-3" /> Name of Author</div>
            </div>
            <div class="pt-6">
              <h3 class="text-xl">Topic of discussion headline from the Forum</h3>
              <div class="mt-3"><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-3" /> Name of Author</div>
            </div>
            <div class="pt-6">
              <h3 class="text-xl">Topic of discussion headline from the Forum</h3>
              <div class="mt-3"><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline mr-3" /> Name of Author</div>
            </div>
          </div>
        </div>
      </div>
      <!-- end discussions -->
    </div>

  </div>

{% endblock %}