{{ template "header.html" . }}

{{- with .ApprovalSkip }}
  {{- /*
    WARNING: The following script should be the very first thing within this html snippet.
  */ -}}
  <script>
    {
      const approvalSkipKey = "approvalSkip.{{ .Key }}";
      const approvalSkipValue = "{{ .Value }}";
      const lastApprovalSkipValue = localStorage.getItem(approvalSkipKey);

      if (lastApprovalSkipValue && lastApprovalSkipValue === approvalSkipValue) {
        const location = new URL(window.location.href);
        location.searchParams.set("alreadyApproved", "true");
        window.location.replace(location.href);
      }

      function removeScopes() {
        localStorage.removeItem(approvalSkipKey);
      }

      function saveScopes() {
        if (document.getElementById("saveAccessGrant")?.checked) {
          localStorage.setItem(approvalSkipKey, approvalSkipValue);
        } else {
          removeScopes()
        }
      }

      window.addEventListener("load", () => {
        document.getElementById("save-access-grant-container").style.display = null;
      });
    }
  </script>
{{- end }}

<div class="theme-panel">
  <h2 class="theme-heading">Grant Access</h2>

  <hr class="dex-separator">
  <div>
    {{ if .Scopes }}
      <div class="dex-subtle-text">{{ .Client }} would like to:</div>
      <ul class="dex-list">
        {{ range $scope := .Scopes }}
          <li>{{ $scope }}</li>
        {{ end }}
      </ul>
    {{ else }}
      <div class="dex-subtle-text">{{ .Client }} has not requested any personal information</div>
    {{ end }}
  </div>
  <hr class="dex-separator">

  <div>
    <div id="save-access-grant-container" style="display: none">
      <input type="checkbox" id="save-access-grant">
      <label for="save-access-grant">
        Save access grant for future logins
      </label>
    </div>

    <div class="theme-form-row">
      <form method="post" onsubmit="saveScopes()">
        <input type="hidden" name="req" value="{{ .AuthReqID }}"/>
        <input type="hidden" name="approval" value="approve">
        <button type="submit" class="dex-btn theme-btn--success">
          <span class="dex-btn-text">Grant Access</span>
        </button>
      </form>
    </div>
    <div class="theme-form-row">
      <form method="post" onsubmit="removeScopes()">
        <input type="hidden" name="req" value="{{ .AuthReqID }}"/>
        <input type="hidden" name="approval" value="rejected">
        <button type="submit" class="dex-btn theme-btn-provider">
          <span class="dex-btn-text">Cancel</span>
        </button>
      </form>
    </div>
  </div>

</div>

{{ template "footer.html" . }}