<!-- Special SSO login form for puavo-eltern. Not usable elsewhere. -->
<div id="container">
    <% if @login_content['upper_logos'] %>
    <div id="upperLogos" class="logoRow">
      <% @login_content['upper_logos'].each do |logo| %>
          <% if logo['href'] %>
          <a href="<%= logo['href'] %>" target="_blank" title="<%= logo['title'] %>"><img src="<%= File.join(@login_content['prefix'], logo['image']) %>" alt="<%= logo['alt'] %>" title="<%= logo['title'] %>" width="<%= logo['width'] %>" height="<%= logo['height'] %>"></a>
          <% else %>
          <img src="<%= File.join(@login_content['prefix'], logo['image']) %>" alt="<%= logo['alt'] %>" title="<%= logo['title'] %>" width="<%= logo['width'] %>" height="<%= logo['height'] %>">
          <% end %>
      <% end %>
    </div>
    <% end %>

    <p id="serviceName"><%= @login_content['service_name'] %></p>

    <% if @login_content['header_text'] %>
    <div id="headerText"><%= @login_content['header_text'] %></div>
    <% end %>

    <% if @login_content['error_message'] %>
    <p id="error"><%= @login_content['error_message'] %></p>
    <% end %>

    <form action="" method="post" accept-charset="utf-8">
        <%= token_tag form_authenticity_token %>
        <input type="hidden" name="return_to" value="<%= @login_content['return_to'] %>">
        <input type="hidden" name="organisation" value="<%= @login_content['organisation'] %>">

        <%
        name = @login_content['username']
        password = @login_content['text_password']
        %>

        <fieldset>
            <div class="row domainAutocomplete">
                <div id="wrapper" style="width: 100%;">
                <input type="text" id="username" name="username" placeholder="<%= @login_content['username_placeholder'] %>" value="<%= name %>" <%= (name.nil? || name.empty?) ? "autofocus" : "" %> required>
                <div id="overlay"></div>
                </div>
            </div>

            <div class="row">
                <input type="password" id="password" name="password" placeholder="<%= @login_content['text_password'] %>" <%= !(name.nil? || name.empty?) ? "autofocus" : "" %> required>
            </div>

            <div class="row">
                <input type="submit" id="submit" value="<%= @login_content['text_login'] %>" class="submit">
            </div>
        </fieldset>
    </form>

    <div id="lowerLogos" class="logoRow">
        <% Array(@login_content['lower_logos'] || []).each do |logo| %>
        <a href="<%= logo['href'] %>" target="_blank" title="<%= logo['title'] %>"><img src="<%= File.join(@login_content['prefix'], logo['image']) %>" width="<%= logo['width'] %>" height="<%= logo['height'] %>" alt="<%= logo['alt'] %>" title="<%= logo['title'] %>"></a>
        <% end %>
        <a href="https://opinsys.fi" target="_blank" title="Opinsys Oy"><img src="<%= File.join(@login_content['prefix'], "opinsys_logo.svg") %>" alt="Opinsys Oy logo" width="150" height="34"></a>
    </div>
</div>

<script>
"use strict";

const overlay = document.querySelector("div#overlay"),
      username = document.querySelector("input#username");

function updateOverlay()
{
    const name = username.value;

    overlay.innerText = name;
    overlay.dataset.domain = (name == "" || name.indexOf("@") > -1) ? "" : "@<%= @login_content['organisation'] %>";
}

document.addEventListener("DOMContentLoaded", () => {
    updateOverlay();
    username.selectionStart = username.selectionEnd = username.value.length;
    username.addEventListener("input", () => updateOverlay());
});
</script>
