<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>atlantis</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="{{ .CleanedBasePath }}/static/js/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function () {
      if (document.URL.indexOf("discard=true") !== -1) {
        $("p.js-discard-success").show();
        setTimeout(function() {
          $("p.js-discard-success").fadeOut('slow',function(){
            window.location.href = "/";
          })
        }, 5000); // <-- time in milliseconds
      }
    });
  </script>
  <link rel="stylesheet" href="{{ .CleanedBasePath }}/static/css/normalize.css">
  <link rel="stylesheet" href="{{ .CleanedBasePath }}/static/css/skeleton.css">
  <link rel="stylesheet" href="{{ .CleanedBasePath }}/static/css/custom.css">
  <link rel="icon" type="image/png" href="{{ .CleanedBasePath }}/static/images/atlantis-icon.png">
</head>
<body>
<div class="container">
  <section class="header">
    <a title="atlantis" href="{{ .CleanedBasePath }}/"><img class="hero" src="{{ .CleanedBasePath }}/static/images/atlantis-icon_512.png"/></a>
    <p class="title-heading">atlantis</p>
    <p class="js-discard-success"><strong>Plan discarded and unlocked!</strong></p>
  </section>
  <section>
    {{ if .ApplyLock.GlobalApplyLockEnabled }}
    {{ if .ApplyLock.Locked }}
    <div class="twelve center columns">
      <h6><strong>Apply commands are disabled globally</strong></h6>
      <h6><code>Lock Status</code>: <strong>Active</strong></h6>
      <h6><code>Active Since</code>: <strong>{{ .ApplyLock.TimeFormatted }}</strong></h6>
      <a class="button button-primary" id="applyUnlockPrompt">Enable Apply Commands</a>
    </div>
    {{ else }}
    <div class="twelve columns">
      <h6><strong>Apply commands are enabled</strong></h6>
      <a class="button button-primary" id="applyLockPrompt">Disable Apply Commands</a>
    </div>
    {{ end }}
    {{ end }}
  </section>
  <br>
  <br>
  <br>
  <section>
    <p class="title-heading small"><strong>Locks</strong></p>
    {{ $basePath := .CleanedBasePath }}
    {{ if .Locks }}
    <div class="lock-grid">
    <div class="lock-header">
      <span>Repository</span>
      <span>Project</span>
      <span>Workspace</span>
      <span>Locked By</span>
      <span>Date/Time</span>
      <span>Status</span>
    </div>
    {{ range .Locks }}
        <div class="lock-row">
        <a class="lock-link" href="{{ $basePath }}{{.LockPath}}">
          <span class="lock-reponame">{{.RepoFullName}} #{{.PullNum}}</span>
        </a>
        <a class="lock-link" tabindex="-1" href="{{ $basePath }}{{.LockPath}}">
          <span class="lock-path">{{.Path}}</span>
        </a>
        <a class="lock-link" tabindex="-1" href="{{ $basePath }}{{.LockPath}}">
          <span><code>{{.Workspace}}</code></span>
        </a>
        <a class="lock-link" tabindex="-1" href="{{ $basePath }}{{.LockPath}}">
          <span class="lock-username">{{.LockedBy}}</span>
        </a>
        <a class="lock-link" tabindex="-1" href="{{ $basePath }}{{.LockPath}}">
          <span class="lock-datetime">{{.TimeFormatted}}</span>
        </a>
        <a class="lock-link" tabindex="-1" href="{{ $basePath }}{{.LockPath}}">
          <span><code>Locked</code></span>
        </a>
        </div>
    {{ end }}
    </div>
    {{ else }}
    <p class="placeholder">No locks found.</p>
    {{ end }}
  </section>
  <br>
  <br>
  <br>
  <section>
    <p class="title-heading small"><strong>Jobs</strong></p>
    {{ if .PullToJobMapping }}
    <div class="lock-grid">
    <div class="lock-header">
      <span>Repository</span>
      <span>Project</span>
      <span>Workspace</span>
      <span>Date/Time</span>
      <span>Step</span>
      <span>Description</span>
    </div>
    {{ range .PullToJobMapping }}
      <div class="pulls-row">
      <span class="pulls-element">{{ .Pull.RepoFullName }} #{{ .Pull.PullNum }}</span>
      <span class="pulls-element">{{ if .Pull.Path }}<code>{{ .Pull.Path }}</code>{{ end }}</span>
      <span class="pulls-element">{{ if .Pull.Workspace }}<code>{{ .Pull.Workspace }}</code>{{ end }}</span>
      <span class="pulls-element">
      {{ range .JobIDInfos }}
        <div><span class="lock-datetime">{{ .TimeFormatted }}</span></div>
      {{ end }}
      </span>
      <span class="pulls-element">
      {{ range .JobIDInfos }}
        <div><a href="{{ $basePath }}{{ .JobIDUrl }}" target="_blank">{{ .JobStep }}</a></div>
      {{ end }}
      </span>
      <span class="pulls-element">
      {{ range .JobIDInfos }}
        <div>{{ .JobDescription }}</div>
      {{ end }}
      </span>
      </div>
    {{ end }}
    </div>
    {{ else }}
    <p class="placeholder">No jobs found.</p>
    {{ end }}
  </section>
  <div id="applyLockMessageModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
      <div class="modal-header">
        <span class="close">&times;</span>
      </div>
      <div class="modal-body">
        <p><strong>Are you sure you want to create a global apply lock? It will disable applies globally</strong></p>
        <input class="button-primary" id="applyLockYes" type="submit" value="Yes">
        <input type="button" class="cancel" value="Cancel">
      </div>
    </div>
  </div>
  <div id="applyUnlockMessageModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
      <div class="modal-header">
        <span class="close">&times;</span>
      </div>
      <div class="modal-body">
        <p><strong>Are you sure you want to release global apply lock?</strong></p>
        <input class="button-primary" id="applyUnlockYes" type="submit" value="Yes">
        <input type="button" class="cancel" value="Cancel">
      </div>
    </div>
  </div>
</div>
<footer>
{{ .AtlantisVersion }}
</footer>
<script>

  function applyLockModalSetup(lockOrUnlock) {
      // Get the modal
      switch( lockOrUnlock ) {
      case "lock":
          var modal = $("#applyLockMessageModal");

          var btn = $("#applyLockPrompt");

          $("#applyLockYes").click(function() {
            $.ajax({
                url: '{{ .CleanedBasePath }}/apply/lock',
                type: 'POST',
                success: function(result) {
                  window.location.replace("{{ .CleanedBasePath }}/");
                }
            });
          });

          break;
      case "unlock":
          var modal = $("#applyUnlockMessageModal");

          var btn = $("#applyUnlockPrompt");
          var btnApplyUnlock =

          $("#applyUnlockYes").click(function() {
            $.ajax({
                url: '{{ .CleanedBasePath }}/apply/unlock',
                type: 'DELETE',
                success: function(result) {
                  window.location.replace("{{ .CleanedBasePath }}/");
                }
            });
          });

          break;
      default:
          throw("unsupported command " + lockOrUnlock)
      }

      return [modal, btn];
  }

  {{ if .ApplyLock.Locked }}
  var [modal, btn] = applyLockModalSetup("unlock");
  {{ else }}
  var [modal, btn] = applyLockModalSetup("lock");
  {{ end }}

  // Get the <span> element that closes the modal
  // using document.getElementsByClassName since jquery $("close") doesn't seem to work for btn click events
  var span = document.getElementsByClassName("close")[0];
  var cancelBtn = document.getElementsByClassName("cancel")[0];

  // When the user clicks the button, open the modal
  btn.click(function() {
    modal.css("display", "block");
  });

  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
    modal.css("display", "none");
  }
  cancelBtn.onclick = function() {
    modal.css("display", "none");
  }

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.css("display", "none");
      }
  }
</script>
</body>
</html>
