{% extends "base.html" %}
{% load bootstrap3 %}
{% load compress %}
{% load i18n %}
{% load humanize %}

{% block stylesheets %}
{{ block.super }}
<style>
.entry {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
    color: black;
    background-color: #eee;
    border-radius: 10px;
}

.entry:hover {
    text-decoration: none;
    background-color: #ddd;
}

.entry-title {
    font-size: 120%;
    font-weight: 900;
    margin-top: 1.4rem;
}

.entry-desc {
    margin-bottom: 1em;
}

.entry-icon {
    font-size: 2em;
    width: 2em;
    display: block;
    text-align: center;
}
</style>
{% endblock %}

{% block content %}

<div class="container">
<div class="col-sm-12">

    <div class="content--narrow">

        <h1>{% trans "Create a new entry" %}</h1>
        <p class="subheading">{% trans "What kind of entry do you want to create?" %}</p>

        <a class="entry" href="{% url 'long-form' %}">
            <i class="entry-icon ojuso-green fa fa-file-text-o"></i>
            <div>
                <h3 class="entry-title">{% trans "Case study" %}</h3>
                <p class="entry-desc">
                    {% trans "A collection of data about a particular land-based project" %}
                </p>
            </div>
        </a>

        <a class="entry" href="{% url 'short-form' %}">
            <i class="entry-icon ojuso-red fa fa-bolt"></i>
            <div>
                <h3 class="entry-title">{% trans "Case study (short)" %}</h3>
                <p class="entry-desc">
                    {% trans "For when you have less information or less time" %}
                </p>
            </div>
        </a>

        <a class="entry" href="{% url 'point-of-interest-form' %}">
            <i class="entry-icon ojuso-blue fa fa-thumb-tack"></i>
            <div>
                <h3 class="entry-title">{% trans "Point of interest" %}</h3>
                <p class="entry-desc">
                    {% trans "Marking somewhere as being of interest to the renewable energy transition" %}
                </p>
            </div>
        </a>

        <p style="margin-top: 40px">If you are interested in writing a technology assessment or policy analysis to appear on this site, please email <a href="mailto:info@ojuso.org">info@ojuso.org</a>.</p>

    </div>

</div>
</div>

{% endblock %}