{% load i18n %}
{% load mama_cas_tags %}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="robots" content="noindex" />
    <title>{% block title %}{% trans "Central Authentication Service" %}{% endblock title %}</title>
    {% block extra_head %}
    <style>
        html,body { background:#eee; color:#777; font:10px arial,sans-serif; margin:0; padding:0 }
        p { font-size:1.2em; margin-top:.3em }
        h1 { color:#777; font-size:2.4em; padding-bottom:15px; text-align:center; font-weight:400; margin:0 }
        fieldset { border:0 none; margin:10px 0 0; padding:0 }
        label { display:block; font-size:1.6em; cursor:pointer; margin:5px }
        span.label label { display:inline; font-size:1.1em; color:#777 }
        h1, label, .actions input { text-shadow:0 1px 0 #f9f9f9 }
        textarea, input { outline:none }
        #header { height:160px }
        #content { background-color:rgba(255,255,255,0.85); border:1px solid #dcdcdc; width:325px; margin:0 auto 200px; padding:20px 30px 40px }
        .inputs input { border:0 none; color:#666; font-size:1.6em; width:65%; padding:10px 0 0 10px }
        .actions { text-align:center }
        .box { border:1px solid #ddd; border-radius:3px; -webkit-box-shadow:0 5px 5px -7px rgba(51,153,255,.7); -moz-box-shadow:0 5px 5px -7px rgba(51,153,255,.7); box-shadow:0 5px 5px -7px rgba(51,153,255,.7) }
        .field, .button { background-color:#fff; height:40px; overflow:hidden; color:#39f; margin-top:10px }
        .button { background-color:#eee; width:37%; cursor:pointer; font-size:1.4em; margin:0 }
        .button:hover { background-color:rgba(0,0,0,.09) }
        .button:active { -webkit-box-shadow:0 1px 4px 0 rgba(51,153,255,.3) inset; -moz-box-shadow:0 1px 4px 0 rgba(51,153,255,.3) inset; box-shadow:0 1px 4px 0 rgba(51,153,255,.3) inset }
        .fieldlabel { background-color:#eee; border-right:1px solid #ddd; float:left; width:9em; cursor:pointer; height:30px; padding:5px }
        .label { font-size:1.2em }
        .messagelist, .warnlist, .errorlist { background-color:#f8fff0; border:1px solid #be7; color:#234600; font-size:1.2em; margin:0 auto }
        .messagelist li, .warnlist li, .errorlist li { margin-left:-10px; padding:2px 0 }
        .messagelist a:link, .messagelist a:visited { color:#234600; text-decoration:underline }
        .errorlist { background-color:#fbe3e4; color:#8a1f11; border-color:#fbc2c4 }
        .warnlist { background-color:#fff6bf; color:#514721; border-color:#ffd324 }
        .errorfield { border-color:#8a1f11 }
        .group:before, .group:after { content:""; display:table }
        .group:after { clear:both }
        .group { zoom:1 }
        .logout { margin-top:12px; float:right }
        .logout a:link, .logout a:visited { font-size:1.2em; color:#777 }
    </style>
    {% endblock extra_head %}
</head>
<body>
    {% block body %}
    <div id="header">{% block header %}{% endblock header %}</div>
    <div id="content" class="box">
        <h1>{% block content_title %}{% trans "Central Authentication Service" %}{% endblock content_title %}</h1>
        {% block content %}

        {% if messages %}
        <div class="messagelist"><ul>
            {% for message in messages %}
            <li class="{{ message.tags }}">
                {% if 'safe' in message.tags %}{{ message|safe }}{% else %}{{ message }}{% endif %}
            </li>
            {% endfor %}
        </ul></div>
        {% endif %}

        {% if form.errors %}
        <div class="errorlist"><ul>
        {% for field in form %}
            {% if field.errors %}<li>{{ field.errors|striptags }}</li>{% endif %}
        {% endfor %}
        {% for error in form.non_field_errors %}
            <li>{{ error }}</li>
        {% endfor %}
        </ul></div>
        {% endif %}

        <form id="login-form" class="group" method="post">
            {% csrf_token %}
            {% for field in form.hidden_fields %}
                {{ field }}
            {% endfor %}
            <fieldset class="inputs">
            {% for field in form.visible_fields %}
                {% if field|field_type = 'charfield' %}
                <div class="field group box{% if field.errors %} errorfield{% endif %}">
                    <span class="fieldlabel">{{ field.label_tag }}</span>{{ field }}
                </div>
                {% else %}
                <div class="field group">
                    {{ field }}<span class="label">{{ field.label_tag }}</span>
                </div>
                {% endif %}
            {% endfor %}
            </fieldset>
            <fieldset class="actions">
                <input class="button box" type="submit" name="submit_login" value="{% trans "Login" %}" />
            </fieldset>
        </form>

        {% endblock content %}
    </div>
    <div id="footer">{% block footer %}{% endblock footer %}</div>
    {% endblock body %}
</body>
</html>
