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

{% block title %} Profile {% endblock %}

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

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">
  <!-- Codemirror -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/lib/codemirror.min.css">

  <!-- Theme style -->
  <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
  <style>
    .CodeMirror { font-size: 12px; }
  </style>

{% endblock stylesheets %}

{% block content %}

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>{{ project_name }}</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">{{ project_name }}</li>
            </ol>
          </div>
        </div>
      </div>
      <!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <!-- /.col -->
          <div class="col-md-12">
            <div class="card card-primary card-outline card-outline-tabs">
              <div class="card-header p-0 border-bottom-0">
                <ul class="nav nav-tabs" id="organization-tabs" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" id="overview-tab" data-toggle="pill" href="#overview" role="tab" aria-controls="overview" aria-selected="true">Overview</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="settings-tab" data-toggle="pill" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="workflow-settings-tab" data-toggle="pill" href="#workflow-settings" role="tab" aria-controls="workflow-settings" aria-selected="false">Workflow Settings</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="secrets-tab" data-toggle="pill" href="#secrets" role="tab" aria-controls="secrets" aria-selected="false">Secrets</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="variables-tab" data-toggle="pill" href="#variables" role="tab" aria-controls="variables" aria-selected="false">Variables</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="webhooks-tab" data-toggle="pill" href="#webhooks" role="tab" aria-controls="webhooks" aria-selected="false">Webhooks</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="repositories-tab" data-toggle="pill" href="#repositories" role="tab" aria-controls="repositories" aria-selected="false">Repositories</a>
                  </li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content" id="organization-tabContent">
                  <div class="tab-pane show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                    <div class="container-fluid">
                      <div class="row">
                        <div class="col-sm-3">
                          <div class="card card-primary">
                            <div class="card-header">
                              <h3 class="card-title">General</h3>
                            </div>
                            <div class="card-body">
                              <ul class="nav flex-column">
                                <li class="nav-item">
                                  <a href="#" class="nav-link">
                                    Project
                                    <span class="float-right">{{ project_name }}</span>
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a href="https://github.com/{{ github_id }}" class="nav-link">
                                    GitHub Org
                                    <span class="float-right">{{ github_id }}</span>
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a href="#settings" class="nav-link tab-link">
                                    {% set two_factor_enabled = config.settings.two_factor_requirement %}
                                    2FA enforced <span class="float-right badge bg-{{ 'success' if two_factor_enabled == true else 'danger' }}">{{ two_factor_enabled }}</span>
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a href="#workflow-settings" class="nav-link tab-link">
                                    {% set default_workflow_permissions = config.settings.workflows.default_workflow_permissions %}
                                    Default workflow permissions <span class="float-right badge bg-{{ 'success' if default_workflow_permissions == 'read' else 'danger' }}">{{ default_workflow_permissions }}</span>
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a href="#secrets" class="nav-link tab-link">
                                    Secrets <span class="float-right badge bg-{{ config.secrets|length_to_color}}">{{ config.secrets|length }}</span>
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a href="#variables" class="nav-link tab-link">
                                    Variables <span class="float-right badge bg-{{ config.variables|length_to_color}}">{{ config.variables|length }}</span>
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a href="#webhooks" class="nav-link tab-link">
                                    Webhooks <span class="float-right badge bg-{{ config.webhooks|length_to_color}}">{{ config.webhooks|length }}</span>
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a href="#repositories" class="nav-link tab-link">
                                    Repositories <span class="float-right badge bg-{{ config.repositories|length_to_color}}">{{ config.repositories|length }}</span>
                                  </a>
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                        <div class="col-sm-3">
                          <div class="card card-{{ secret_scanning_data|from_json|first|int_status }}">
                            <div class="card-header">
                              <h3 class="card-title">Secret Scanning</h3>
                            </div>
                            <div class="card-body">
                              <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-{{ branch_protection_data|from_json|first|int_status }}">
                            <div class="card-header">
                              <h3 class="card-title">Branch Protections</h3>
                            </div>
                            <div class="card-body">
                              <canvas id="branch-protection-chart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- /.card -->
                  </div>
                  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">
                    <textarea id="org-settings-textarea">
{{ config.settings|pretty_format_model }}
                    </textarea>
                  </div>
                  <div class="tab-pane" id="workflow-settings" role="tabpanel" aria-labelledby="workflow-settings-tab">
                    <textarea id="org-workflow-settings-textarea">
{{ config.settings.workflows|pretty_format_model }}
                    </textarea>
                  </div>
                  <div class="tab-pane" id="secrets" role="tabpanel" aria-labelledby="secrets-tab">
                    <div class="table-responsive p-0">
                      <table class="table table-hover text-nowrap">
                        <thead>
                          <tr>
                            <th>Name</th>
                            <th>Secret</th>
                            <th>Visibility</th>
                            <th>Selected Repos</th>
                            <th class="text-center">Resolved</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for secret in config.secrets|sort(attribute='name') %}
                          <tr>
                            <td>{{ secret.name }}</td>
                            <td>{{ secret.value }}</td>
                            <td>{{ secret.visibility }}</td>
                            <td>
                              {% if secret.selected_repositories %}
                              {{ secret.selected_repositories|pprint }}
                              {% endif %}
                            </td>
                            <td class="text-center">
                              {% if not secret|has_dummy_secret %}
                              <i class="text-success fa-solid fa-circle-check"></i>
                              {% else %}
                              <i class="text-warning fa-solid fa-circle-xmark"></i>
                              {% endif %}
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div class="tab-pane" id="variables" role="tabpanel" aria-labelledby="variables-tab">
                    <div class="table-responsive p-0">
                      <table class="table table-hover text-nowrap">
                        <thead>
                          <tr>
                            <th>Name</th>
                            <th>Value</th>
                            <th>Visibility</th>
                            <th>Selected Repos</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for variable in config.variables|sort(attribute='name') %}
                          <tr>
                            <td>{{ variable.name }}</td>
                            <td>{{ variable.value }}</td>
                            <td>{{ variable.visibility }}</td>
                            <td>
                              {% if secret.selected_repositories %}
                              {{ secret.selected_repositories|pprint }}
                              {% endif %}
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div class="tab-pane" id="webhooks" role="tabpanel" aria-labelledby="webhooks-tab">
                    <div class="table-responsive p-0">
                      <table class="table table-hover text-nowrap">
                        <thead>
                          <tr>
                            <th>URL</th>
                            <th class="text-center">Active</th>
                            <th>Events</th>
                            <th class="text-center">Uses SSL</th>
                            <th class="text-center">Resolved Secret</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for webhook in config.webhooks|sort(attribute='url') %}
                          <tr>
                            <td>{{ webhook.url }}</td>
                            <td class="text-center">
                              {% if webhook.active == true %}
                              <i class="text-success fa-solid fa-circle-check"></i>
                              {% else %}
                              <i class="text-danger fa-solid fa-circle-xmark"></i>
                              {% endif %}
                            </td>
                            <td>
                              <ul>
                              {% for event in webhook.events %}
                                <li>{{ event }}</li>
                              {% endfor %}
                              </ul>
                            </td>
                            <td class="text-center">
                              {% if webhook.insecure_ssl == "0" %}
                              <i class="text-success fa-solid fa-circle-check"></i>
                              {% else %}
                              <i class="text-danger fa-solid fa-circle-xmark"></i>
                              {% endif %}
                            </td>
                            <td class="text-center">
                              {% if webhook.secret %}
                                {% if not webhook|has_dummy_secret %}
                              <i class="text-success fa-solid fa-circle-check"></i>
                                {% else %}
                              <i class="text-info fa-solid fa-circle-xmark"></i>
                                {% endif %}
                              {% else %}
                              <i class="text-muted fa-solid fa-circle"></i>
                              {% endif %}
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div class="tab-pane" id="repositories" role="tabpanel" aria-labelledby="repositories-tab">
                    <div class="table-responsive p-0">
                      <table class="table table-hover text-nowrap">
                        <thead>
                          <tr>
                            <th>Repository</th>
                            <th class="text-center">Branch Protections</th>
                            <th class="text-center">Secrets</th>
                            <th class="text-center">Variables</th>
                            <th class="text-center">Webhooks</th>
                            <th class="text-center">Secret Scanning</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for repo in config.repositories|sort(attribute='name') %}
                          <tr>
                            <td>
                              {% if repo.archived == true %}
                              <i class="fa-solid fa-box-archive"></i>
                              {% endif %}
                              <a href="/projects/{{ project_name }}/repos/{{ repo.name }}">{{ repo.name }}</a>
                              <a href="https://github.com/{{ config.github_id }}/{{ repo.name }}" target="_blank"><i class="fa-solid fa-up-right-from-square"></i></a>
                            </td>
                            <td class="text-center">
                              {% if repo.archived == true %}
                              <i class="text-muted fa-solid fa-circle"></i>
                              {% elif repo.branch_protection_rules|length > 0 or repo.rulesets|length > 0 %}
                              <i class="text-success fa-solid fa-circle-check"></i>
                              {% else %}
                              <i class="text-danger fa-solid fa-circle-xmark"></i>
                              {% endif %}
                            </td>
                            <td class="text-center">
                              {% if repo.secrets|length > 0 %}
                                {% if not repo.secrets|has_dummy_secrets %}
                              <i class="text-success fa-solid fa-circle-check"></i>
                                {% else %}
                              <i class="text-info fa-solid fa-circle-xmark"></i>
                                {% endif %}
                              {% else %}
                              <i class="text-muted fa-solid fa-circle"></i>
                              {% endif %}
                            </td>
                            <td class="text-center">
                              {% if repo.variables|length > 0 %}
                              <i class="text-success fa-solid fa-circle-check"></i>
                              {% else %}
                              <i class="text-muted fa-solid fa-circle"></i>
                              {% endif %}
                            </td>
                            <td class="text-center">
                              {% if repo.webhooks|length > 0 %}
                                {% if not repo.webhooks|has_dummy_secrets %}
                              <i class="text-success fa-solid fa-circle-check"></i>
                                {% else %}
                              <i class="text-info fa-solid fa-circle-xmark"></i>
                                {% endif %}
                              {% else %}
                              <i class="text-muted fa-solid fa-circle"></i>
                              {% endif %}
                            </td>
                            <td class="text-center">
                              {% if repo.archived == true %}
                              <i class="text-muted fa-solid fa-circle"></i>
                              {% elif repo.secret_scanning_push_protection == "enabled" %}
                              <i class="text-success fa-solid fa-circle-check"></i>
                              {% elif repo.secret_scanning == "enabled" %}
                              <i class="text-warning fa-solid fa-circle-check"></i>
                              {% else %}
                              <i class="text-danger fa-solid fa-circle-xmark"></i>
                              {% endif %}
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <!-- /.card -->
            </div>
          </div>

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

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}

  <!-- jQuery -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
  <!-- Bootstrap 4 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
  <!-- Codemirror -->
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/lib/codemirror.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/javascript/javascript.min.js"></script>
  <!-- AdminLTE App -->
  <script src="/static/assets/js/adminlte.min.js"></script>

  <script>
    $(document).ready(function() {
      var hash = window.location.hash;
      if (hash) {
        $('[data-toggle="pill"][href="' + hash + '"]').trigger('click');
      }

      drawSecretScanningChart();
      drawBranchProtectionChart();
    });

    $('.tab-link').on('click', function(event) {
      // Prevent url change
      event.preventDefault();

      // `this` is the clicked <a> tag
      $('[data-toggle="pill"][href="' + this.hash + '"]').trigger('click');
    });

    $('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
      switch (e.target.id) {
        case "settings-tab": {
           enableEditor('#org-settings-textarea')
           break;
        }
        case "workflow-settings-tab": {
           enableEditor('#org-workflow-settings-textarea')
           break;
        }
      }
    });

    function enableEditor(selector) {
      var editor = $(selector).next('.CodeMirror').get(0);
      if (editor == null) {
        editor = CodeMirror.fromTextArea($(selector).get(0), {
          mode: "javascript",
          lineWrapping: true,
          readOnly: true
        });
        editor.setSize(null, 750);
      }
    };

    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 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
          }
        }
      });
    };
  </script>

{% endblock javascripts %}
