{% extends "layout.html" %}

{% block title %}
    Compare
{% endblock %}

{% block pageTitle %}
    AST Metrics - Overview
{% endblock %}

{% block content %}

    <!-- start: language tabs-->
    <div class="flex overflow-x-auto overflow-y-hidden border-b border-gray-200 whitespace-nowrap ">

        <a 
            href="compare.html"
            class="inline-flex items-center h-10 px-2 py-2 -mb-px text-center {% if currentLanguage == "All" %}text-blue-600 border-blue-500{% endif %} bg-transparent border-b-2 sm:px-4 -px-1 focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mx-1 sm:w-6 sm:h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
            </svg>

            <span class="mx-1 text-sm sm:text-base">
                All languages <span class="text-xs sm:text-sm">({{ projectAggregated.Combined.ConcernedFiles|length }} files)</span>
            </span>
        </a>

        <!-- start: language tab -->
            {% for languageName, lang in projectAggregated.ByProgrammingLanguage %}
            <a 
                href="compare_{{ languageName }}.html"
                class="inline-flex items-center h-10 px-2 py-2 -mb-px text-center bg-transparent border-b-2 {% if currentLanguage == languageName %}text-blue-600 border-blue-500{% else %}text-gray-700   border-transparent{% endif %} sm:px-4 -px-1 hover:border-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mx-1 sm:w-6 sm:h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                </svg>
    
                <span class="mx-1 text-sm sm:text-base">
                    {{ languageName }} <span class="text-xs sm:text-sm">({{ lang.ConcernedFiles|length }} files)
                </span>
            </a>
            {% endfor %}
        <!-- end: language tab -->

    </div>
    <!-- end: language tabs-->

    <!-- start: line of 4 cards -->
    <div class="grid grid-cols-4 gap-4 mt-4">

        <!-- start: card -->
        <div class="max-w-2xl px-8 py-4 bg-white rounded-lg shadow-md ">
            <div class="mt-2">
                <div>
                    <h5 class="leading-none text-3xl font-bold text-gray-900 pb-2">
                        {% include "componentComparaisonOperator.html" with diff=currentView.Comparaison.Loc %}
                        {{ currentView.Comparaison.Loc|stringifyNumber }}
                    </h5>
                    <p class="text-base font-normal text-gray-500 ">
                        Lines of code
                    </p>
                </div>
            </div>
        </div>
        <!-- end: card -->

        <!-- start: card -->
        <div class="max-w-2xl px-8 py-4 bg-white rounded-lg shadow-md ">
            <div class="mt-2">
                <div>
                    <h5 class="leading-none text-3xl font-bold text-gray-900 pb-2">
                        {{ currentView.Comparaison.NbModifiedFiles|stringifyNumber }}
                    </h5>
                    <p class="text-base font-normal text-gray-500 ">
                        Modified files
                    </p>
                    <p class="border-t border-gray-200 mt-2 italic text-sm text-gray-600 pt-4 text-justify">
                        {% if currentView.Comparaison.NbModifiedFilesIncludingNegligible + currentView.Comparaison.NbModifiedFiles != currentView.Comparaison.NbModifiedFiles %}
                        {{ currentView.Comparaison.NbModifiedFilesIncludingNegligible + currentView.Comparaison.NbModifiedFiles|stringifyNumber }} modifications in commits, 
                        but only {{ currentView.Comparaison.NbModifiedFiles|stringifyNumber }} are significant.
                        {% endif %}
                        {{ currentView.Comparaison.NbNewFiles|stringifyNumber }} new files.
                    </p>
                </div>
            </div>
        </div>
        <!-- end: card -->

        <!-- start: card -->
        <div class="max-w-2xl px-8 py-4 bg-white rounded-lg shadow-md ">
            <div class="mt-2">
                <div>
                    <h5 class="leading-none text-3xl font-bold text-gray-900 pb-2">
                        {{ currentView.Comparaison.NbClasses|stringifyNumber }}
                    </h5>
                    <p class="text-base font-normal text-gray-500 ">
                        New classes
                    </p>
                </div>
            </div>
        </div>
        <!-- end: card -->

        <!-- start: card -->
        <div class="max-w-2xl px-8 py-4 bg-white rounded-lg shadow-md ">
            <div class="mt-2">
                <div>
                    <h5 class="leading-none text-3xl font-bold text-gray-900 pb-2">
                        {{ currentView.Comparaison.NbMethods|stringifyNumber }}
                    </h5>
                    <p class="text-base font-normal text-gray-500 ">
                        New methods
                    </p>
                </div>
            </div>
        </div>
        <!-- end: card -->
    </div>

    <!-- start: line of 1 cards -->
    <div class="grid grid-cols-1 gap-4 mt-4">

        <!-- start: card -->
        <div class="w-full px-8 py-4 bg-white rounded-lg shadow-md ">
            <div class="mt-2">
                <div>
                    <h5 class="leading-none text-3xl font-bold text-gray-900 pb-2">
                        Comparing with 
                        <code class="bg-gray-100 text-gray-800 px-2 py-1 rounded">{{ currentView.Comparaison.ComparedBranch }}</code>
                    </h5>
                </div>
                <div class="mt-4">
                    {% include "componentTableCompareBranch.html" with detailled=true linesToDisplay=100 %}
                </div>
            </div>
        </div>
        <!-- end: card -->
    </div>
    <!-- end: line of 1 cards -->
    
{% endblock %}