{% extends 'base.html' %}

{% block content %}
<div class="ui grid">
    <div class="row">
        <div class="four wide column">
    {% if not current_user.is_authenticated %}
            <h2>{% trans %}Login{% endtrans %}</h2>
            <form class="ui form" method="post" action="{{ url_for('security.login') }}">
                {{ login_form.hidden_tag() }}
                {{ login_form.email.label }}
                {{ login_form.email }}
                {{ login_form.password.label }}
                {{ login_form.password }}
                <button type="submit" class="fluid ui primary button">{% trans %}Login{% endtrans %}</button>
            </form>
        {% if config.REGISTRATION_ENABLED %}
            <div class="ui horizontal divider">
                {% trans %}Or{% endtrans %}
            </div>
            <a href="{{ url_for('account.register_account' ) }}" class="fluid ui button">{% trans %}Register an account{% endtrans %}</a>
        {% endif %}
            <div class="ui horizontal divider"></div>
    {% endif %}
            <h2>{% trans %}What is Calendar.social?{% endtrans %}</h2>
            <p>
                {% trans %}Calendar.social is a calendar app based on open protocols and free, open source software.{% endtrans %}
                {% trans %}It is decentralised like one of its counterparts, email.{% endtrans %}
            </p>
    {% if current_user.is_authenticated %}
            <div class="ui horizontal divider"></div>
            <a href="{{ url_for('hello') }}" class="ui fluid primary button">{% trans %}Go to your calendar{% endtrans %}</a>
    {% endif %}
        </div>
        <div class="twelve wide column">
            <h2>{% trans %}Peek inside{% endtrans %}</h2>
    {% include 'month-view.html' %}
        </div>
    </div>
    <div class="row">
        <div class="four wide column">
            <h2>{% trans %}Built with users in mind{% endtrans %}</h2>
            <p>
                {% trans %}From planning your appointments to organising large scale events Calendar.social can help with all your scheduling needs.{% endtrans %}
            </p>
        </div>

        <div class="four wide column">
            <div class="ui centered statistics">
                <div class="statistic">
                    <div class="value">{{ user_count }}</div>
                    <div class="label">
                        {% trans count=user_count %}user{% pluralize %}users{% endtrans %}
                    </div>
                </div>
                <div class="statistic">
                    <div class="value">{{ event_count }}</div>
                    <div class="label">
                        {% trans count=event_count %}event{% pluralize %}events{% endtrans %}
                    </div>
                </div>
            </div>
        </div>

        <div class="four wide column">
            <h2>{% trans %}Built for people{% endtrans %}</h2>
            <p>
                {% trans %}Calendar.social is not a commercial network.{% endtrans %}
                {% trans %}No advertising, no data mining, no walled gardens.{% endtrans %}
                {% trans %}There is no central authority.{% endtrans %}
            </p>
        </div>

        <div class="four wide column">
            <h2>{% trans %}Administered by{% endtrans %}</h2>
            <a href="#" class="ui profile">
                <div class="avatar"></div>
                <div class="display name">Your Admin here</div>
                <div class="handle">@admin@he.re</div>
            </a>
        </div>
    </div>
</div>
{% endblock content %}