{% extends "base.html" %}

{% load static %}

{% block content %}
  <!-- Breadcrumb -->
  <div class="p-3 space-x-2 text-sm divide-x divide-gray-300 md:p-0">
    <a class="hover:text-orange" href="/"><i class="fas fa-home"></i></a>
    <a class="pl-2 hover:text-orange" href="{% if version_slug %}{% url 'libraries' %}?version={{ version_slug }}{% else %}{% url 'libraries' %}{% endif %}">Libraries{% if version_name %} ({{ version.name }}){% endif %}</a>
    <span class="pl-2 capitalize">{{ object.name }}</span>
  </div>
  <!-- end breadcrumb -->

  <div class="flex mt-4">

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

      <!-- Overview -->
      <div class="pb-16 mb-16">
        <!-- Form to select a version of this library -->
        <form action="{% url 'library-detail' slug=object.slug %}" method="post" class="float-right">
          {% csrf_token %}
          <div>
            <label for="id_version" hidden="true">Versions:</label>
            <select onchange="this.form.submit()"
                    name="version"
                    class="block py-1 pr-8 pl-5 mb-3 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:text-orange dark:border-slate"
                    id="id_version"
            >
              <option>Filter by version</option>
              {% for v in versions %}
                <option value="{{ v.pk }}" {% if version == v %}selected="selected"{% endif %}>{{ v.display_name }}</option>
              {% endfor %}
            </select>
          </div>
        </form>
        <div class="pb-6">
          <h3 class="text-4xl capitalize text-orange" id="overview">
            Boost.{{ object.name }}
          </h3>
        </div>

        <div class="p-4 md:flex md:space-x-3">
          <div class="px-2 pt-2 space-y-2 w-full bg-white rounded-lg md:w-1/3 dark:bg-charcoal">
              <a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100" href="https://boost.org/libs/{{ object.slug }}">
                <i class="float-right mt-3 fas fa-folder"></i>
                Documentation
                <span class="block text-xs text-sky-600">boost.org/libs/{{ object.slug }}</span>
              </a>
              <a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100" href="{{ object.github_issues_url }}">
                <i class="float-right mt-3 fas fa-bug"></i>
                GitHub Issues
                <span class="block text-xs text-sky-600">{{ object.github_issues_url|cut:"https://" }}</span>
              </a>
              <a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100" href="{{ object.github_url }}">
                <i class="float-right mt-3 fab fa-github"></i>
                Source Code
                <span class="block text-xs text-sky-600">{{ object.github_url|cut:"https://" }}</span>
              </a>

              <div class="inline-block py-1 px-2 w-full rounded cursor-pointer hover:bg-gray-100">
                <a class="inline-block py-1 px-2 rounded cursor-pointer hover:bg-gray-100">{% if object.first_github_tag_date%}Since {{ object.first_github_tag_date|date:"Y" }}{% endif %}</a>
                <span class="float-right"><a class="inline-block float-right py-1 px-2 rounded cursor-pointer hover:bg-gray-100">{{ object.get_cpp_standard_minimum_display }}</a></span>
              </div>

              <span class="block py-1 px-2 rounded cursor-pointer hover:bg-gray-100">Categories:
                {% for category in object.categories.all %}
                  <a class="inline text-sky-600" href="{% url 'libraries' %}?category={{ category.slug }}">{{ category.name }}</a>
                {% endfor %}
              </span>

              <p class="pt-4 pl-2 mt-4 text-sm border-t border-gray-200">{{ object.description }}</p>
            </ul>
          </div>

          <div class="flex space-x-3 w-full bg-gray-300 rounded-lg md:w-2/3 dark:bg-charcoal">
            <div class="relative w-1/2">
              <div id="chart1" class="absolute bottom-10 w-full text-center">Commits per Month Graph</div>
            </div>

            <div class="relative w-1/2">
              <div id="chart2" class="absolute bottom-10 w-full text-center">Commits per Year Graph</div>
            </div>
          </div>
        </div>

        <!-- Avatars -->
        <div class="p-5 my-6 w-full">
          Profile photos here
        </div>


        <div class="p-4 my-4 bg-white rounded-lg dark:bg-charcoal">
          <h3>Introduction</h3>

          <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.</p>

          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>

          <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui.</p>
        </div>
      </div>
      <!-- end overview -->
    </div>

  </div>

{% endblock %}

{% block footer_js %}
{#<script>#}
{#  var options = {#}
{#      series: [{#}
{#      name: 'Commits',#}
{#      data: [256, 255, 251, 260, 267, 230, 254, 242, 274, 265, 243, 234]#}
{#    }],#}
{#      chart: {#}
{#      height: 350,#}
{#      type: 'bar',#}
{#    },#}
{#    plotOptions: {#}
{#      bar: {#}
{#        borderRadius: 2,#}
{#        dataLabels: {#}
{#          position: 'top', // top, center, bottom#}
{#        },#}
{#      }#}
{#    },#}
{#    dataLabels: {#}
{#      enabled: true,#}
{#      formatter: function (val) {#}
{#        //return val + "%";#}
{#        return val;#}
{#      },#}
{#      offsetY: -20,#}
{#      style: {#}
{#        fontSize: '12px',#}
{#        colors: ["#304758"]#}
{#      }#}
{#    },#}
{##}
{#    xaxis: {#}
{#      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],#}
{#      position: 'top',#}
{#      axisBorder: {#}
{#        show: false#}
{#      },#}
{#      axisTicks: {#}
{#        show: false#}
{#      },#}
{#      crosshairs: {#}
{#        fill: {#}
{#          type: 'gradient',#}
{#          gradient: {#}
{#            colorFrom: '#D8E3F0',#}
{#            colorTo: '#BED1E6',#}
{#            stops: [0, 100],#}
{#            opacityFrom: 0.4,#}
{#            opacityTo: 0.5,#}
{#          }#}
{#        }#}
{#      },#}
{#      tooltip: {#}
{#        enabled: true,#}
{#      }#}
{#    },#}
{#    yaxis: {#}
{#      axisBorder: {#}
{#        show: true#}
{#      },#}
{#      axisTicks: {#}
{#        show: true,#}
{#      },#}
{#      labels: {#}
{#        show: true,#}
{#        formatter: function (val) {#}
{#          //return val + "%";#}
{#          return val;#}
{#        }#}
{#      }#}
{##}
{#    },#}
{#    title: {#}
{#      text: 'Commits per Month',#}
{#      floating: true,#}
{#      offsetY: 330,#}
{#      align: 'center',#}
{#      style: {#}
{#        color: '#444'#}
{#      }#}
{#    }#}
{#  };#}
{##}
{##}
{##}
{#  var options2 = {#}
{#      series: [{#}
{#      name: 'Commits',#}
{#      data: [1367, 981, 400, 2235, 1888]#}
{#    }],#}
{#      chart: {#}
{#      height: 350,#}
{#      type: 'bar',#}
{#    },#}
{#    plotOptions: {#}
{#      bar: {#}
{#        borderRadius: 2,#}
{#        dataLabels: {#}
{#          position: 'top', // top, center, bottom#}
{#        },#}
{#      }#}
{#    },#}
{#    dataLabels: {#}
{#      enabled: true,#}
{#      formatter: function (val) {#}
{#        //return val + "%";#}
{#        return val;#}
{#      },#}
{#      offsetY: -20,#}
{#      style: {#}
{#        fontSize: '12px',#}
{#        colors: ["#304758"]#}
{#      }#}
{#    },#}
{##}
{#    xaxis: {#}
{#      categories: ["2019", "2020", "2021", "2022", "2023"],#}
{#      position: 'top',#}
{#      axisBorder: {#}
{#        show: false#}
{#      },#}
{#      axisTicks: {#}
{#        show: false#}
{#      },#}
{#      crosshairs: {#}
{#        fill: {#}
{#          type: 'gradient',#}
{#          gradient: {#}
{#            colorFrom: '#D8E3F0',#}
{#            colorTo: '#BED1E6',#}
{#            stops: [0, 100],#}
{#            opacityFrom: 0.4,#}
{#            opacityTo: 0.5,#}
{#          }#}
{#        }#}
{#      },#}
{#      tooltip: {#}
{#        enabled: true,#}
{#      }#}
{#    },#}
{#    yaxis: {#}
{#      axisBorder: {#}
{#        show: true#}
{#      },#}
{#      axisTicks: {#}
{#        show: true,#}
{#      },#}
{#      labels: {#}
{#        show: true,#}
{#        formatter: function (val) {#}
{#          //return val + "%";#}
{#          return val;#}
{#        }#}
{#      }#}
{##}
{#    },#}
{#    title: {#}
{#      text: 'Commits per Year',#}
{#      floating: true,#}
{#      offsetY: 330,#}
{#      align: 'center',#}
{#      style: {#}
{#        color: '#444'#}
{#      }#}
{#    }#}
{#  };#}
{##}
{#  var chart = new ApexCharts(document.querySelector("#chart1"), options);#}
{#  chart.render();#}
{##}
{#  var chart2 = new ApexCharts(document.querySelector("#chart2"), options2);#}
{#  chart2.render();#}
{#</script>#}
{% endblock %}
