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

{% block title %} GitHub Organizations {% endblock %}

<!-- Element injected in the BODY element -->
{% block body_class %} {% 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">
  <!-- DataTables -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/datatables.net-bs4@1.13.10/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/datatables.net-responsive-bs4@2.2.9/css/responsive.bootstrap4.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">

{% 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>Organizations</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">Organizations</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">List of GitHub organizations</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <table id="organizations" class="table table-bordered table-hover">
                  <thead>
                  <tr>
                    <th>Installation ID</th>
                    <th>Installation Status</th>
                    <th>Project Name</th>
                    <th>GitHub Organization</th>
                  </tr>
                  </thead>
                  <tbody>
                    {% for installation in installations %}
                    <tr>
                      <td>{{ installation.installation_id }}</td>
                      <td>{{ installation.installation_status }}</td>
                      <td>{{ installation.project_name }}</td>
                      <td><a href="https://github.com/{{ installation.github_id }}" target="_blank"><i class="fab fa-github"></i> &nbsp; {{ installation.github_id }}</a></td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </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>
  <!-- DataTables -->
  <script src="https://cdn.jsdelivr.net/npm/datatables.net@1.13.10/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/datatables.net-bs4@1.13.10/js/dataTables.bootstrap4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/datatables.net-responsive@2.2.9/js/dataTables.responsive.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/datatables.net-responsive-bs4@2.2.9/js/responsive.bootstrap4.min.js"></script>
  <!-- AdminLTE App -->
  <script src="/static/assets/js/adminlte.min.js"></script>

  <!-- page script -->
  <script>
    $(function () {
      $('#organizations').DataTable({
        "autoWidth": false,
        "responsive": true,
        "pageLength": 50,
        "lengthMenu": [
          [10, 25, 50, 100, -1],
          [10, 25, 50, 100, "All"]
        ],
        "order": [[3, 'asc']]
      });
    });
  </script>

{% endblock javascripts %}
