$def with (oidc_issuers, saml_support, possible_vos, buttons = ["btn btn-block btn-outline-warning btn-lg", "btn btn-block btn-outline-info btn-lg", "btn btn-block btn-outline-danger btn-lg"], original_buttons = ["btn btn-block btn-outline-warning btn-lg", "btn btn-block btn-outline-info btn-lg", "btn btn-block btn-outline-danger btn-lg"])
<!--
 Copyright European Organization for Nuclear Research (CERN)

 Licensed under the Apache License, Version 2.0 (the "License");
 You may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0

 Authors:
 - Jaroslav Guenther, <jaroslav.guenther@gmail.com>, 2019-2020
 - Patrick Austin <patrick.austin@stfc.ac.uk>, 2020
-->


<!DOCTYPE html>
<html>
<body>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="/static/select_login_method.css">
<!--  move the functional part of this template to JS
<input id='oidc_issuers' type="hidden" value="$oidc_issuers">
<script src="/static/select_login_method.js"></script>
-->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">

<div class="container">
  <div class="row">
<div class="card">
<article class="card-body">
  <h4 class="card-title text-center mb-4 mt-1"><img src="/media/RucioUI.png" width="450px"></h4>
  <hr>
  <p class="text-success text-center">Choose Login Method</p>
  <p>
    <a href="" class="btn btn-block btn-outline-primary btn-lg" role="button" onclick="this.href='/x509?account='+document.getElementById('accountname').value+'&vo='+document.getElementById('voname').value" height="auto"><i class="fab fa-2x icon-certificate vertical-align-middle"></i><span class="inline-block padding-bottom-2">   X509 Certificate</span></a>
    <a href="" class="btn btn-block btn-outline-rucio btn-lg" role="button" onclick="this.href='/login?account='+document.getElementById('accountname').value+'&vo='+document.getElementById('voname').value" height="auto"> <i class="fab fa-2x icon-rucio vertical-align-middle"></i><span class="inline-block padding-bottom-2">   Rucio Userpass</span></a>
    $if saml_support == True:
        <a href="" class="btn btn-block btn-outline-cern btn-lg" role="button" onclick="this.href='/saml?account='+document.getElementById('accountname').value+'&vo='+document.getElementById('voname').value" height="auto"> <i class="fab fa-2x icon-cern vertical-align-middle"></i><span class="inline-block padding-bottom-2">   CERN SSO Log-In</span></a>
    $if len(oidc_issuers) == 1:
        <a href="" class="btn btn-block btn-outline-warning btn-lg" role="button" onclick="this.href='/oidc?account='+document.getElementById('accountname').value+'&vo='+document.getElementById('voname').value+'&issuer='+&quot;$oidc_issuers[0]&quot;" height="auto"> <i class="fa-2x icon-openid vertical-align-middle"></i><span class="inline-block padding-bottom-2"> $oidc_issuers[0]</span></a>
    $if len(oidc_issuers) > 1:
        $for idp in oidc_issuers:
            <a href="" class="$buttons[0]" role="button" onclick="this.href='/oidc?account='+document.getElementById('accountname').value+'&vo='+document.getElementById('voname').value+'&issuer='+&quot;$idp&quot;" height="auto"> <i class="fa-2x icon-openid vertical-align-middle"></i><span class="inline-block padding-bottom-2"> $idp</span></a>
            $buttons.append(buttons[0])
            $buttons.remove(buttons[0])
        $for i in range(len(buttons)):
            $buttons.remove(buttons[0])
        $buttons.append(original_buttons[0])
        $buttons.append(original_buttons[1])
        $buttons.append(original_buttons[2])


  </p>
  <form>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" style="width: 2.75em"> <i class="fa fa-user"></i> </span>
      </div>
      <input name="accountname" class="form-control" placeholder="Optionally specify Rucio account name ..." type="accountname" id="accountname" value="">
    </div> <!-- input-group.// -->
    $if possible_vos:
        <div class="input-group">
          <label style="color:red; line-height:21pt; text-align: center;">Unable to login, multiple VOs found for given identity. Please select a VO and try again:</label>
          <div class="input-group-prepend">
            <span class="input-group-text" style="width: 2.75em"> <i class="fa fa-desktop"></i> </span>
          </div>
          <select name="voname" class="form-control" type="voname" id="voname">
          <option selected></option>
          $for possible_vo in possible_vos:
              <option value=$possible_vo[0]>$possible_vo[1] - $possible_vo[0]</option>
        </div> <!-- input-group.// -->
    $else:
        <input type="hidden" name="voname" id="voname"/>
  </div> <!-- form-group// -->
  </form>
</article>
</div>
</div> <!--container end.//-->



</body>
</html>
