<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="fragments/base"
      th:with="lang=${#locale.language}" th:lang="${lang}">      
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="$contextPath/static/css/css_country.css" th:href="@{/static/css/css_country.css}"/>
  <title th:text="#{gui.countryselection.title}">eIDAS-Login Länderauswahl</title>
<script type="text/javascript">
</script>
<style>
body {
	background-image: none;
	margin:		0px;
	font-family:	"Helvetica Neue", Helvetica, Arial, sans-serif;
}

div.header { 
	background-color: #e9ecef;
	padding-top: 28px;
	padding-left: 137px;
	padding-right: 137px;
	padding-bottom: 12px;
}
div.titlebar { 
	padding: 0px;
}
div.titlebar div { 
}
.hidden {
	display: none;
}
ul.nav_oben {
	padding: 0px;
	margin: 0px;
	text-align: right;
	text-transform: uppercase;
}
li {
	display: inline-block;
}	
div.header a {
	text-decoration: none;
	color: black;
}
a {
	text-decoration: none;
	color: #a22c1c;
}
.block {
	/* override country.css */
	width: 200px;
	padding-bottom: 20px;
}
@media only screen and (min-width: 1000px) {
	div.header { 
		padding-left: 137px;
		padding-right: 137px;
	}
	.content {
		padding-left: 137px;
		padding-right: 137px;
	}
	footer {
		padding-left: 137px;
		padding-right: 137px;
	}
}
@media only screen and (max-width: 999px) {
	div.header { 
		padding-left: 1em;
		padding-right: 1em;
	}
	.content {
		padding-left: 1em;
		padding-right: 1em;
	}
	footer {
		padding-left: 1em;
		padding-right: 1em;
	}
}

div.subtitle h1 {
	padding: 0px;
	margin: 0px;
	font-size: 130%;
	align: right;
}
div.subtitle h2 {
	padding: 0px;
	margin: 0px;
	font-size: 115%;
}
footer {
    left: 0;
    padding-top: 1em;
    bottom: 0;
    width: 100%;
    height: 2em;
    background-color: rgb(162,44,28);
    color: white;
}
.float {
	float: left;
}
.floatright {
	float: right;
}
.copyright {
	width: 66%;
	font-size: 80%;
}
#countries {
	padding-bottom: 40px; 
}
#country {
	padding-bottom: 20px; 
}
input[type=submit] {
	width: inherit;
/*	text-align: left; */
}
form {
	justify-content: center;
}
</style>
<script type="text/javascript">

/* Element.closest polyfill - https://developer.mozilla.org/en-US/docs/Web/API/Element/closest License: public domain*/
if (!Element.prototype.matches)
    Element.prototype.matches = Element.prototype.msMatchesSelector || 
                                Element.prototype.webkitMatchesSelector;

if (!Element.prototype.closest)
    Element.prototype.closest = function(s) {
        var el = this;
        if (!document.documentElement.contains(el)) return null;
        do {
            if (el.matches(s)) return el;
            el = el.parentElement || el.parentNode;
        } while (el !== null && el.nodeType === 1); 
        return null;
    };


function clickCountryFlag(element) {
	if (!element) return false;

	var form = element.closest("form"); 

	if (!form) return false;

	form.submit();
	return false;
}
</script>
</head>
<body>
  <div class="header container">
    <div class="titlebar">
      <div>
	     <a href="https://www.bmi.gv.at/" target="_blank" title="Home">
	       <img class="toplogo img-responsive" src="/static/BMI.png" alt="Logo BMI"
              th:attr="alt=#{gui.countryselection.logo.bmi.alt}">
	       <h1 class="hidden" th:text="#{gui.countryselection.header1}"> Bundesministerium für Inneres </h1>
	     </a>
      </div>
      <ul class="nav_oben">
        <li>
          <div class="languageselection" th:include="language_selection :: selectlanguage">
            LanguageSelectionBlock
          </div>
        </li>
        &nbsp; &nbsp;
        <li><a href="https://www.bmi.gv.at/" target="_blank" th:text="#{gui.countryselection.link.bmi}" > Startseite BMI </a></li>
      </ul>
    </div>
  </div>
  <div class="content">
    <div class="subtitle">
      <h1 th:text="#{gui.countryselection.header2}" > Zentraler eIDAS Knoten der Republik Österreich </h1>
      <h2 th:text="#{gui.countryselection.header3}" > Betrieben durch das Bundesministerium für Inneres </h2>
    </div>

    <h1 th:text="#{gui.countryselection.header.selection}"> Wählen Sie Ihr Land / Select your country </h1>

    <div id="country">
    <!-- Active countries -->            
            <form class="block" method="post" action="$contextPath$submitEndpoint" th:attr="action=@{${submitEndpoint}}">
                <a><img class="countryimage" src="$contextPath/img/countries/germany-eu_.png" alt="Germany-eID"
                        th:attr="src=@{/img/countries/germany-eu_.png},alt=#{gui.countryselection.country.de.logo.alt}"/></a>
                <input type="submit" role="button" value="Deutschland / Germany" th:attr="value=#{gui.countryselection.country.de}" />
                <input type="hidden" name="selectedCountry" value="XX">              
                <input  type="hidden" name="pendingid"  value="$pendingid" th:attr="value=${pendingid}" />                
            </form>
                                               
    </div>

    <!-- Abbrechen Button -->
    <form   class="block" method="post"  action="$contextPath$submitEndpoint" th:attr="action=@{${submitEndpoint}}"> 
      <input  type="submit" class="btn btn-outline-primary btn-block" value="Abbrechen/Cancel" th:attr="value=#{gui.countryselection.cancle}">                                    
      <input  type="hidden" name="stopAuthProcess" value="true" >
      <input  type="hidden" name="pendingid"  value="$pendingid" th:attr="value=${pendingid}">
    </form>

    <p th:text="#{gui.countryselection.notsupportedinfo}" >Wenn Sie Ihr Land in dieser Aufzählung nicht entdecken ... </p> 
   
<h2 th:text="#{gui.countryselection.infos.general.header}" > Information zur Anmeldung über Europäische eIDs </h2>
<p>
  <span th:text="#{gui.countryselection.infos.general.part.1}"> first part </span>        
  <a href="https://www.bmi.gv.at/" target="_blank" th:text="#{gui.countryselection.header1}" > Bundesministerium für Inneres </a> 
  <span th:text="#{gui.countryselection.infos.general.part.2}"> second part </span>
</p>
                                                                                                               
<p>
  <span th:text="#{gui.countryselection.infos.general.part.3}"> third part </span>
  <a href="https://eur-lex.europa.eu/legal-content/DE/TXT/HTML/?uri=CELEX:32014R0910&from=DE" target="_blank" th:text="#{gui.countryselection.infos.general.link.1}"> eIDAS-Verordnung der Europäischen Union </a>  
  <span th:text="#{gui.countryselection.infos.general.part.4}"> fourth part </span>
</p>

<p
  <span th:text="#{gui.countryselection.infos.general.part.5}"> fived part </span>
  <a href="https://www.dsb.gv.at/-/das-erganzungsregister-fur-naturliche-personen-ernp-" target="_blank" th:text="#{gui.countryselection.infos.general.link.2}" ></a>
  <span th:text="#{gui.countryselection.infos.general.part.6}"> sixed part </span>  
</p>

  </div>
  <footer>
	<div class="copyright">&copy; BUNDESMINISTERIUM FÜR INNERES</div>
	<div></div>
 </footer>
</body>
</html>