<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Log In - {{ SITE_NAME }}</title>
  <link rel="icon" href="{{ url_for('static', filename='img/favicon.png') }}">
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  {% assets "css_login" -%}
  <link rel="stylesheet" href="{{ ASSET_URL }}">
  {%- endassets %}
{% if SETTING.get('custom_css') %}
  <link rel="stylesheet" href="/static/custom/{{ SETTING.get('custom_css') }}">
{% endif %}
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="hold-transition login-page">
  <div class="login-box">
    <div class="login-logo">
      <a href="{{ url_for('index.index') }}"><b>PowerDNS</b>-Admin</a>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
      {% if error %}
      <div class="alert alert-danger alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        {{ error }}
      </div>
      {% endif %}
      {% if SETTING.get('ldap_enabled') or SETTING.get('local_db_enabled') %}
      <form action="" method="post" data-toggle="validator">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Username" name="username"
            data-error="Please input your username" required {% if username %}value="{{ username }}" {% endif %}>
          <span class="help-block with-errors"></span>
        </div>
        <div class="form-group">
          <input type="password" class="form-control" placeholder="Password" name="password"
            data-error="Please input your password" required {% if password %}value="{{ password }}" {% endif %}>
          <span class="help-block with-errors"></span>
        </div>
        {% if SETTING.get('otp_field_enabled') %}
        <div class="form-group">
          <input type="otptoken" class="form-control" placeholder="OTP Token" name="otptoken" autocomplete="off">
        </div>
        {% endif %}
        {% if SETTING.get('ldap_enabled') and SETTING.get('local_db_enabled') %}
        <div class="form-group">
          <select class="form-control" name="auth_method">
            <option value="LOCAL">LOCAL Authentication</option>
            {% if SETTING.get('login_ldap_first') %}
            <option value="LDAP" selected="selected">LDAP Authentication</option>
            {% else %}
            <option value="LDAP">LDAP Authentication</option>
            {% endif %}
          </select>
        </div>
        {% elif SETTING.get('ldap_enabled') and not SETTING.get('local_db_enabled') %}
        <div class="form-group">
          <input type="hidden" name="auth_method" value="LDAP">
        </div>
        {% elif SETTING.get('local_db_enabled') and not SETTING.get('ldap_enabled') %}
        <div class="form-group">
          <input type="hidden" name="auth_method" value="LOCAL">
        </div>
        {% else %}
        <div class="form-group">
          <input type="hidden" name="auth_method" value="LOCAL">
        </div>
        {% endif %}

        <div class="row">
          <div class="col-xs-8">
            <div class="checkbox icheck">
              <label>
                <input type="checkbox" name="remember"> Remember Me
              </label>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-xs-4">
            <button type="submit" class="btn btn-flat btn-primary btn-block">Sign In</button>
          </div>
          <!-- /.col -->
        </div>
      </form>
      {% endif %}
      {% if SETTING.get('google_oauth_enabled') or SETTING.get('github_oauth_enabled') or SETTING.get('oidc_oauth_enabled') or SETTING.get('azure_oauth_enabled') %}
      <div class="social-auth-links text-center">
        {% if SETTING.get('ldap_enabled') or SETTING.get('local_db_enabled') %}
        <p>- OR -</p>
        {% endif %}
        {% if SETTING.get('oidc_oauth_enabled') %}
        <a href="{{ url_for('index.oidc_login') }}" class="btn btn-block btn-social btn-openid btn-flat"><i
            class="fa fa-openid"></i> Sign in using
          OpenID Connect</a>
        {% endif %}
        {% if SETTING.get('github_oauth_enabled') %}
        <a href="{{ url_for('index.github_login') }}" class="btn btn-block btn-social btn-github btn-flat"><i
            class="fa fa-github"></i> Sign in using
          Github</a>
        {% endif %}
        {% if SETTING.get('google_oauth_enabled') %}
        <a href="{{ url_for('index.google_login') }}" class="btn btn-block btn-social btn-google btn-flat"><i
            class="fa fa-google"></i> Sign in using
          Google</a>
        {% endif %}
        {% if SETTING.get('azure_oauth_enabled') %}
        <a href="{{ url_for('index.azure_login') }}" class="btn btn-block btn-social btn-microsoft btn-flat"><i
          class="fa fa-windows"></i> Sign in using
        Microsoft Azure</a>
      {% endif %}
      </div>
      {% endif %}

      {% if saml_enabled %}
      <a href="{{ url_for('index.saml_login') }}">SAML login</a>
      {% endif %}

      {% if SETTING.get('signup_enabled') %}
      <br>
      <a href="{{ url_for('index.register') }}" class="text-center">Create an account </a>
        {% if SETTING.get('verify_user_email') %}
          <br/>
          <a href="{{ url_for('index.resend_confirmation_email') }}" class="text-center">Resend confirmation email</a>
        {% endif %}
      {% endif %}
    </div>
    <!-- /.login-box-body -->
    <div class="login-box-footer">
      <center>
        <p>Powered by <a href="https://github.com/ngoduykhanh/PowerDNS-Admin">PowerDNS-Admin</a></p>
      </center>
    </div>
  </div>
  <!-- /.login-box -->

  {% assets "js_login" -%}
  <script type="text/javascript" src="{{ ASSET_URL }}"></script>
  {%- endassets %}
  {% assets "js_validation" -%}
  <script type="text/javascript" src="{{ ASSET_URL }}"></script>
  {%- endassets %}

  <script>
    $(function () {
      $('input').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
        increaseArea: '20%' // optional
      });
    });
  </script>
</body>

</html>
