{{define "error.html"}}
<!DOCTYPE html>
<html lang="en" charset="utf-8">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>{{.StatusCode}} {{.Title}}</title>
<link rel="stylesheet" href="{{.ProxyPrefix}}/static/css/bulma.min.css">
<link rel="stylesheet" href="{{.ProxyPrefix}}/static/css/all.min.css">

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    let cardToggles = document.getElementsByClassName('card-toggle');
    for (let i = 0; i < cardToggles.length; i++) {
      cardToggles[i].addEventListener('click', e => {
        e.currentTarget.parentElement.parentElement.childNodes[3].classList.toggle('is-hidden');
      });
    }
  });
</script>

<style>
  body {
    height: 100vh;
  }
  .error-box {
    margin: 1.25rem auto;
    max-width: 600px;
  }
  .status-code {
    font-size: 12rem;
    font-weight: 600;
  }
  #more-info.card {
    border: 1px solid #f0f0f0;
  }
  footer a {
    text-decoration: underline;
  }
</style>
</head>
<body class="has-background-light">
<section class="section">
  <div class="box block error-box has-text-centered">
    <div class="status-code">{{.StatusCode}}</div>
    <div class="block">
      <h1 class="subtitle is-1">{{.Title}}</h1>
    </div>

    {{ if or .Message .RequestID }}
    <div id="more-info" class="block card is-fullwidth is-shadowless">
      <header class="card-header is-shadowless">
        <p class="card-header-title">More Info</p>
        <a class="card-header-icon card-toggle">
          <i class="fa fa-angle-down"></i>
        </a>
      </header>
      <div class="card-content has-text-left is-hidden">
        {{ if .Message }}
        <div class="content">
          {{.Message}}
        </div>
        {{ end }}
        {{ if .RequestID }}
        <div class="content">
          Request ID: {{.RequestID}}
        </div>
        {{ end }}
      </div>
    </div>
    {{ end }}

    {{ if .Redirect }}
    <hr>

    <div class="columns">
      <div class="column">
        <form method="GET" action="{{.Redirect}}">
          <button type="submit" class="button is-danger is-fullwidth">Go back</button>
        </form>
      </div>
      <div class="column">
        <form method="GET" action="{{.ProxyPrefix}}/sign_in">
          <input type="hidden" name="rd" value="{{.Redirect}}">
          <button type="submit" class="button is-primary is-fullwidth">Sign in</button>
        </form>
      </div>
    </div>
    {{ end }}

  </div>
</section>

<footer class="footer has-text-grey has-background-light is-size-7">
  <div class="content has-text-centered">
    {{ if eq .Footer "-" }}
    {{ else if eq .Footer ""}}
    <p>Secured with <a href="https://github.com/oauth2-proxy/oauth2-proxy#oauth2_proxy" class="has-text-grey">OAuth2 Proxy</a> version {{.Version}}</p>
    {{ else }}
    <p>{{.Footer}}</p>
    {{ end }}
  </div>
</footer>

</body>
</html>
{{end}}
