<!DOCTYPE html>

{% load social %}
{% get_social_apps as social_apps %}

<!--[if IE 7]><html lang="en" class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html lang="en" class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><html lang="en" class="no-js"><![endif]-->
    <head>
        <title>{{ PLATFORM_NAME }}</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width">
        <meta name="description" content="Platform for participatory mapping, developed by ExCiteS at University College London." />

        <link rel="stylesheet" href="/static/lib/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="/static/css/admin.css">

        <script src="/static/lib/modernizr/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>

    <body id="home">
        <main id="content">
            <div class="container">
                <div class="credits">
                    <span>Background image by</span>
                    <a href="https://flic.kr/p/gJuU8W" target="_blank" title="Mariya Chorna" class="light">Mariya Chorna</a>
                    (<a href="https://creativecommons.org/licenses/by/2.0/" target="_blank" title="Creative Commons License - Generic" class="light">CC BY 2.0</a>)
                </div>

                <div class="jumbotron">
                    <h1>{{ PLATFORM_NAME }}</h1>
                    <p>Welcome to an open platform for participatory mapping.</p>
                    <p>Join the community and record, view, discuss local knowledge using digital maps.</p>
                </div>
            </div>

            <div class="authentication">
                <div class="container">
                    <h2>Welcome</h2>

                    <div class="row">
                        <div class="col-md-6">
                            <h3 class="header">Sign in with email address</h3>

                            <form action="{% url 'account_login' %}" method="POST" novalidate>
                                {% csrf_token %}

                                <div class="form-group {% if form.login.errors %}has-error{% endif %}">
                                    <label for="login">Email address</label>
                                    <input type="email" class="form-control input-lg" id="login" name="login" required />
                                </div>

                                <div class="form-group {% if form.password.errors %}has-error{% endif %}">
                                    <label for="password">Password</label>
                                    <input type="password" class="form-control input-lg" id="password" name="password" required />
                                </div>

                                <div class="form-group">
                                    <button type="submit" class="btn btn-lg btn-primary">Sign me in</button>
                                    <a role="button" href="{% url 'account_reset_password' %}" class="btn btn-lg btn-link light">Forgot Password?</a>
                                </div>
                            </form>
                        </div>

                        {% if social_apps %}
                            <div class="col-md-6">
                                <h3 class="header">Sign in with social account</h3>
                                {% include 'snippets/social_apps.html' with process='login' %}
                            </div>
                        {% endif %}
                    </div>

                    <div class="row">
                        <div class="col-md-12 text-center">
                            <p>New to {{ PLATFORM_NAME }}? Use your social account to sign in or <a href="{% url 'account_signup' %}" class="light">sign up using an email address</a>.</p>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        {% include 'snippets/footer.html' %}

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="/static/lib/jquery/jquery-1.12.0.min.js"><\/script>');</script>
        <script src="/static/js/admin.ui.forms.validate.js"></script>

        {% include 'snippets/google_analytics.html' %}
    </body>
</html>
