<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 %>

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

    <p id="serviceName">
        <% if @login_content['service_title_override'] %>
        <%= @login_content['service_title_override'] %>
        <% else %>
        <%= @login_content["text_login_to"] %> <span><%= @login_content["external_service_name"] %></span>
        <% end %>
    </p>

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

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

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

        <fieldset>
            <div class="row">
                <% if display_domain %><div class="col-username"><% end %>
                <input type="text" id="username" name="username" placeholder="<%= @login_content['username_placeholder'] %>" value="<%= name %>" <%= (name.nil? || name.empty?) ? "autofocus" : "" %> required>
                <% if display_domain %></div><div class="col-orgname"><span>@<%= display_domain %></span></div><% end %>
            </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">
                <div id="animation">
                    <!--
                        This MIT-licensed animation was taken from https://github.com/n3r4zzurr0/svg-spinners.
                        I "unminimized" it a bit, since we're not that size-constrained.
                    //-->
                    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <style>
                            .spinner_Wezc{transform-origin:center;animation:spinner_Oiah .75s step-end infinite}
                            @keyframes spinner_Oiah{
                                8.3%{transform:rotate(30deg)}
                                16.6%{transform:rotate(60deg)}
                                25%{transform:rotate(90deg)}
                                33.3%{transform:rotate(120deg)}
                                41.6%{transform:rotate(150deg)}
                                50%{transform:rotate(180deg)}
                                58.3%{transform:rotate(210deg)}
                                66.6%{transform:rotate(240deg)}
                                75%{transform:rotate(270deg)}
                                83.3%{transform:rotate(300deg)}
                                91.6%{transform:rotate(330deg)}
                                100%{transform:rotate(360deg)}}
                        </style>
                        <g class="spinner_Wezc">
                            <circle cx="12" cy="2.5" r="1.5" opacity=".14"/>
                            <circle cx="16.75" cy="3.77" r="1.5" opacity=".29"/>
                            <circle cx="20.23" cy="7.25" r="1.5" opacity=".43"/>
                            <circle cx="21.50" cy="12.00" r="1.5" opacity=".57"/>
                            <circle cx="20.23" cy="16.75" r="1.5" opacity=".71"/>
                            <circle cx="16.75" cy="20.23" r="1.5" opacity=".86"/>
                            <circle cx="12" cy="21.5" r="1.5"/>
                        </g>
                    </svg>
                </div>

                <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 %>
    </div>

    <div id="help">
        <% if @login_content['support_info'] %>
        <p class="support-info" id="support"><%= raw(@login_content['support_info']) %> </p>
        <% end %>

        <details id="help">
            <summary><%= @login_content['text_help'] %></summary>
        <% if @login_content['organisation'] %>
            <p><%= @login_content['text_username_help'] %></p>
        <% else %>
            <p><%= @login_content['text_organisation_help'] %></p>
        <% end %>
        </details>

        <details id="developers">
            <summary><%= @login_content['text_developers'] %></summary>
            <p><%= raw(@login_content['text_developers_info']) %> </p>
        </details>
    </div>
</div>

<footer class="public">
    <%= manufacturer_logo %>
    <p><%= copyright_with_year %></p>
</footer>

<script>
const TOP_DOMAIN = "<%= @login_content['topdomain'] %>";

document.addEventListener("DOMContentLoaded", () => {
    const input = document.getElementById("username");

    input.addEventListener("blur", e => {
        const domain = input.value.split("@")[1];

        // Append the top-level domain if it's not set
        if (domain && !domain.match(/\./))
            input.value = input.value + "." + TOP_DOMAIN;
    });

    document.querySelector("form").addEventListener("submit", e => {
        <% if @login_content['display_domain'] %>
        // We're in a "forced domain" mode, so if the username already
        // contains the domain name (any domain), remove it.
        const field = document.querySelector("input#username");

        if (field && field.value.indexOf("@") != -1)
            field.value = field.value.split("@")[0];
        <% end %>

        // Prevent multiple submissions
        document.querySelector("input#submit").disabled = true;

        // Show the spinner animation ("we're doing something, sorry if it takes too long")
        document.querySelector("div#animation").style.visibility = "visible";
    });
});

</script>
