{% 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>Repository {{ repo_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"><a href="/projects/{{ project_name }}">{{ project_name }}</a></li>
              <li class="breadcrumb-item active">{{ repo_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="repository-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="environments-tab" data-toggle="pill" href="#environments" role="tab" aria-controls="environments" aria-selected="false">Environments</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="branch-protection-rules-tab" data-toggle="pill" href="#branch-protection-rules" role="tab" aria-controls="branch-protection-rules" aria-selected="false">Branch Protection Rules</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="rulesets-tab" data-toggle="pill" href="#rulesets" role="tab" aria-controls="rulesets" aria-selected="false">Rulesets</a>
                  </li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content" id="repository-tabContent">
                  <div class="tab-pane show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                    <div class="col-sm-3">
                    <ul class="nav flex-column">
                      <li class="nav-item">
                        <a href="https://github.com/{{ github_id }}/{{ repo_name }}" class="nav-link">
                          Repository
                          <span class="float-right">{{ repo_name }}</span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="#secrets" class="nav-link tab-link">
                          Secrets <span class="float-right badge bg-{{ repo_config.secrets|length_to_color}}">{{ repo_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-{{ repo_config.variables|length_to_color}}">{{ repo_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-{{ repo_config.webhooks|length_to_color}}">{{ repo_config.webhooks|length }}</span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="#environments" class="nav-link tab-link">
                          Environments <span class="float-right badge bg-{{ repo_config.environments|length_to_color}}">{{ repo_config.environments|length }}</span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="#branch-protection-rules" class="nav-link tab-link">
                          Branch Protection Rules <span class="float-right badge bg-{{ repo_config.branch_protection_rules|length_to_color}}">{{ repo_config.branch_protection_rules|length }}</span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="#rulesets" class="nav-link tab-link">
                          Rulesets <span class="float-right badge bg-{{ repo_config.rulesets|length_to_color}}">{{ repo_config.rulesets|length }}</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                  </div>
                  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">
                    <textarea id="settings-textarea">
{{ repo_config|pretty_format_model }}
                    </textarea>
                  </div>
                  <div class="tab-pane" id="workflow-settings" role="tabpanel" aria-labelledby="workflow-settings-tab">
                    <textarea id="workflow-settings-textarea">
{{ repo_config.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 class="text-center">Resolved</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for secret in repo_config.secrets|sort(attribute='name') %}
                          <tr>
                            <td>{{ secret.name }}</td>
                            <td>{{ secret.value }}</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>
                          </tr>
                        </thead>
                        <tbody>
                          {% for variable in repo_config.variables|sort(attribute='name') %}
                          <tr>
                            <td>{{ variable.name }}</td>
                            <td>{{ variable.value }}</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 repo_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="environments" role="tabpanel" aria-labelledby="environments-tab">
                    <div class="row">
                      <div class="col-1">
                        <div class="nav flex-column nav-tabs nav-tabs-left h-100" id="environments-tabs" role="tablist" aria-orientation="vertical">
                          {% for env in repo_config.environments %}
                          {% set env_id = 'env-' ~ loop.index %}
                          <a class="nav-link {{ 'active' if loop.index == 1 else '' }}" id="{{ env_id }}-tab" data-toggle="pill" href="#{{ env_id }}" role="tab" aria-controls="{{ env_id }}" aria-selected="{{ 'true' if loop.index == 1 else 'false' }}">{{ env.name }}</a>
                          {% endfor %}
                        </div>
                      </div>
                      <div class="col-10">
                        <div class="tab-content" id="environments-tabContent">
                          {% for env in repo_config.environments %}
                          {% set env_id = 'env-' ~ loop.index %}
                          <div class="tab-pane show {{ 'active' if loop.index == 1 else '' }}" id="{{ env_id }}" role="tabpanel" aria-labelledby="{{ env_id }}-tab">
                    <textarea id="{{ env_id }}-textarea">
{{ env|pretty_format_model }}
                    </textarea>
                          </div>
                          {% endfor %}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane" id="branch-protection-rules" role="tabpanel" aria-labelledby="branch-protection-rules-tab">
                    <div class="row">
                      <div class="col-1">
                        <div class="nav flex-column nav-tabs nav-tabs-left h-100" id="rules-tabs" role="tablist" aria-orientation="vertical">
                          {% for bpr in repo_config.branch_protection_rules %}
                          {% set id = 'rule-' ~ loop.index %}
                          <a class="nav-link {{ 'active' if loop.index == 1 else '' }}" id="{{ id }}-tab" data-toggle="pill" href="#{{ id }}" role="tab" aria-controls="{{ id }}" aria-selected="{{ 'true' if loop.index == 1 else 'false' }}">{{ bpr.pattern }}</a>
                          {% endfor %}
                        </div>
                      </div>
                      <div class="col-10">
                        <div class="tab-content" id="rules-tabContent">
                          {% for bpr in repo_config.branch_protection_rules %}
                          {% set id = 'rule-' ~ loop.index %}
                          <div class="tab-pane show {{ 'active' if loop.index == 1 else '' }}" id="{{ id }}" role="tabpanel" aria-labelledby="{{ id }}-tab">
                    <textarea id="{{ id }}-textarea">
{{ bpr|pretty_format_model }}
                    </textarea>
                          </div>
                          {% endfor %}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane" id="rulesets" role="tabpanel" aria-labelledby="rulesets-tab">
                    <div class="row">
                      <div class="col-1">
                        <div class="nav flex-column nav-tabs nav-tabs-left h-100" id="rulesets-tabs" role="tablist" aria-orientation="vertical">
                          {% for ruleset in repo_config.rulesets %}
                          {% set ruleset_id = 'ruleset-' ~ loop.index %}
                          <a class="nav-link {{ 'active' if loop.index == 1 else '' }}" id="{{ ruleset_id }}-tab" data-toggle="pill" href="#{{ ruleset_id }}" role="tab" aria-controls="{{ ruleset_id }}" aria-selected="{{ 'true' if loop.index == 1 else 'false' }}">{{ ruleset.name }}</a>
                          {% endfor %}
                        </div>
                      </div>
                      <div class="col-10">
                        <div class="tab-content" id="rulesets-tabContent">
                          {% for ruleset in repo_config.rulesets %}
                          {% set ruleset_id = 'ruleset-' ~ loop.index %}
                          <div class="tab-pane show {{ 'active' if loop.index == 1 else '' }}" id="{{ ruleset_id }}" role="tabpanel" aria-labelledby="{{ ruleset_id }}-tab">
                    <textarea id="{{ ruleset_id }}-textarea">
{{ ruleset|pretty_format_model }}
                    </textarea>
                          </div>
                          {% endfor %}
                        </div>
                      </div>
                    </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>
  <!-- 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>
    $('.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('#settings-textarea')
           break;
        }
        case "workflow-settings-tab": {
           enableEditor('#workflow-settings-textarea')
           break;
        }
        case "environments-tab": {
           var selector = "#env-1-textarea";
           var target = $(selector).get(0);
           if (target != null) {
             enableEditor(selector);
           }
           break;
        }
        case "branch-protection-rules-tab": {
           var selector = "#rule-1-textarea";
           var target = $(selector).get(0);
           if (target != null) {
             enableEditor(selector);
           }
           break;
        }
        case "rulesets-tab": {
           var selector = "#ruleset-1-textarea";
           var target = $(selector).get(0);
           if (target != null) {
             enableEditor(selector);
           }
           break;
        }
        default: {
           var selector = '#'.concat(e.target.id.replace(/-tab/, ''), '-textarea');
           enableEditor(selector);
           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, 770);
      }
    };
  </script>

{% endblock javascripts %}
