<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blank White Cards!</title>
    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>" />
    <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head>

<body>
    <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom uk-height-1-1">
        <div class="uk-text-center uk-container uk-flex uk-flex-around" id="top-bar">
            <h1 class="uk-heading-line-">
                <a href="/">
                    <img class="bwc-logo" src="<%= Routes.static_path(@conn, "/images/bwc.png") %>" alt="BWC Logo" />
                </a>
            </h1>
            <div class='auth uk-flex uk-flex-column uk-flex-center'>
            <div>
            <span class='uk-icon' uk-icon="icon:user" style="width:150px;"></span>
            </div>
            <div id="top-bar-username" class='uk-flex uk-flex-row uk-flex-center uk-margin-small-top'>
            <b>You are:&nbsp;</b>
            <a style='width:100px;' href="javascript:show_login_box()">
            <%= if @current_player do %>
            <%=show_username(@current_player)%>
            <% else %>
            Nobody
            <% end %>
            </a>
            <input id="top-bar-login-box"/>
            </div>
            </div>
        </div>

        <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
        <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
        <div class="uk-text-center uk-container uk-flex uk-flex-center uk-margin-top">
            <%= @inner_content %>
        </div>
    </div>
</body>

</html>
