{% extends "layouts/base.html" %}

{% block title %} Dashboard {% endblock %}

<!-- Element injected in the BODY element -->
{% block body_class %} sidebar-mini {% endblock body_class %}

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}
  {{ super() }}
{% endblock stylesheets %}

{% block content %}

  <div class="content-wrapper">

    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Dashboard</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/index">Home</a></li>
              <li class="breadcrumb-item active">Dashboard</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->
        <div class="row">
          <div class="col-lg-2">
            <div class="small-box bg-info">
              <div class="inner">
                <h3>{{ installations|length }}</h3>
                <p>GitHub Organizations</p>
              </div>
              <div class="icon">
                <i class="fas fa-sitemap"></i>
              </div>
              <a href="/admin/organizations" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <div class="col-lg-2">
            <div class="small-box bg-warning">
              <div class="inner">
                <h3>{{ open_pull_request_count }}</h3>
                <p>Open Pull Requests</p>
              </div>
              <div class="icon">
                <i class="fas fa-code-pull-request"></i>
              </div>
              <a href="/admin/pullrequests" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <div class="col-lg-2">
            <div class="small-box bg-success">
              <div class="inner">
                <h3>{{ merged_pull_request_count }}</h3>
                <p>Merged Pull Requests</p>
              </div>
              <div class="icon">
                <i class="fas fa-code-merge"></i>
              </div>
              <a href="/admin/pullrequests" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <div class="col-lg-2">
            <div class="small-box bg-info">
              <div class="inner">
                <h3>{{ total_repository_count }}</h3>
                <p>Total Repositories</p>
              </div>
              <div class="icon">
                <i class="fab fa-github"></i>
              </div>
            </div>
          </div>
          <div class="col-lg-2">
            <div class="small-box bg-success">
              <div class="inner">
                <h3>{{ active_repository_count }}</h3>
                <p>Active Repositories</p>
              </div>
              <div class="icon">
                <i class="fab fa-github"></i>
              </div>
            </div>
          </div>
          <div class="col-lg-2">
            <div class="small-box bg-secondary">
              <div class="inner">
                <h3>{{ archived_repository_count }}</h3>
                <p>Archived Repositories</p>
              </div>
              <div class="icon">
                <i class="fab fa-github"></i>
              </div>
            </div>
          </div>
        </div>
        <!-- ./row -->

        <div class="row">
          <div class="col-sm-3">
            <div class="card card-info">
              <div class="card-header">
                <h3 class="card-title">Two Factor Enforcement</h3>
              </div>
              <div class="card-body">
                <h3 class="text-center text-secondary">{{ '%0.1f' % two_factor_percentage|float  }}% enforced</h3>
                <canvas id="two-factor-chart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
              </div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="card card-info">
              <div class="card-header">
                <h3 class="card-title">Secret Scanning</h3>
              </div>
              <div class="card-body">
                <h3 class="text-center text-secondary">{{ '%0.1f' % secret_scanning_percentage|float  }}% with alert or protection</h3>
                <canvas id="secret-scanning-chart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
              </div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="card card-info">
              <div class="card-header">
                <h3 class="card-title">Dependabot</h3>
              </div>
              <div class="card-body">
                <h3 class="text-center text-secondary">{{ '%0.1f' % dependabot_percentage|float  }}% with alert or updates</h3>
                <canvas id="dependabot-chart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
              </div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="card card-info">
              <div class="card-header">
                <h3 class="card-title">Branch Protections</h3>
              </div>
              <div class="card-body">
                <h3 class="text-center text-secondary">{{ '%0.1f' % branch_protection_percentage|float  }}% enabled</h3>
                <canvas id="branch-protection-chart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
              </div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="card card-info">
              <div class="card-header">
                <h3 class="card-title">Private Vulnerability Reporting</h3>
              </div>
              <div class="card-body">
                <h3 class="text-center text-secondary">{{ '%0.1f' % private_vulnerability_reporting_percentage|float  }}% enabled</h3>
                <canvas id="private-vulnerability-reporting-chart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
              </div>
            </div>
          </div>
        </div>
        <!-- /.row -->

      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->

  </div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
  {{ super() }}
  <!-- Chart.js -->
  <script src="/assets/vendor/chartjs/chart.umd.js"></script>

  <script type="module">
    $(document).ready(function() {
      drawTwoFactorChart();
      drawSecretScanningChart();
      drawDependabotChart();
      drawBranchProtectionChart();
      drawPrivateVulnerabilityReportingChart();
    });

    function drawTwoFactorChart() {
      const two_factor_ctx = document.getElementById('two-factor-chart');

      new Chart(two_factor_ctx, {
        type: 'doughnut',
        data: {
          labels: ['not required', 'enforced'],
          datasets: [{
            label: 'two factor requirement',
            data: {{ two_factor_data|safe }},
            backgroundColor: [
              '#dc3545',
              '#28a745'
            ],
            borderWidth: 1
          }]
        },
        options: {
          animation: {
            animateRotate: false
          }
        }
      });
    };

    function drawSecretScanningChart() {
      const secret_scanning_ctx = document.getElementById('secret-scanning-chart');

      new Chart(secret_scanning_ctx, {
        type: 'doughnut',
        data: {
          labels: ['disabled', 'alert mode', 'protection mode'],
          datasets: [{
            label: 'secret scanning',
            data: {{ secret_scanning_data|safe }},
            backgroundColor: [
              '#dc3545',
              '#ffc107',
              '#28a745'
            ],
            borderWidth: 1
          }]
        },
        options: {
          animation: {
            animateRotate: false
          }
        }
      });
    };

    function drawDependabotChart() {
      const chart_ctx = document.getElementById('dependabot-chart');

      new Chart(chart_ctx, {
        type: 'doughnut',
        data: {
          labels: ['disabled', 'alerts', 'security updates'],
          datasets: [{
            label: 'dependabot',
            data: {{ dependabot_data|safe }},
            backgroundColor: [
              '#dc3545',
              '#ffc107',
              '#28a745'
            ],
            borderWidth: 1
          }]
        },
        options: {
          animation: {
            animateRotate: false
          }
        }
      });
    };

    function drawBranchProtectionChart() {
      const branch_protections_ctx = document.getElementById('branch-protection-chart');

      new Chart(branch_protections_ctx, {
        type: 'doughnut',
        data: {
          labels: ['not protected', 'protected'],
          datasets: [{
            label: 'branch protections',
            data: {{ branch_protection_data|safe }},
            backgroundColor: [
              '#dc3545',
              '#28a745'
            ],
            borderWidth: 1
          }]
        },
        options: {
          animation: {
            animateRotate: false
          }
        }
      });
    };

    function drawPrivateVulnerabilityReportingChart() {
      const private_vuln_ctx = document.getElementById('private-vulnerability-reporting-chart');

      new Chart(private_vuln_ctx, {
        type: 'doughnut',
        data: {
          labels: ['disabled', 'enabled'],
          datasets: [{
            label: 'private vulnerability reporting',
            data: {{ private_vulnerability_reporting_data|safe }},
            backgroundColor: [
              '#ffc107',
              '#28a745',
            ],
            borderWidth: 1
          }]
        },
        options: {
          animation: {
            animateRotate: false
          }
        }
      });
    };
  </script>

{% endblock javascripts %}
