{% extends "base.html" %}
{% load url %}
{% load bleach %}

{% block title %}{{ object.subject }} - Emails - {{ block.super }}{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'emails:list' %}">Emails</a></li>
        <li class="breadcrumb-item active">{{ object.subject }}</li>
    </ol>
{% endblock %}

{% block content %}
    <h2>{{ object.subject }}</h2>
    {% if object.sent %}
        <p>Sent on {{ object.sent_at|date:"j N Y" }}</p>
    {% endif %}
    <hr>
    <div class="row ml-1">
        <div class="d-flex col-8 bg-light rounded p-4 justify-content-center">
            {# The html email body is set to width:600px #}
            <div class="bg-white rounded p-2" style="width:600px;">
                <p>Dear user, </p>
                {{ object.body|md2email_html }}
                <p>&mdash; Your Grand Challenge Team</p>
            </div>
        </div>
        <div class="col-4">
            {% if not object.sent and "emails.change_email" in perms %}
                <div class="alert alert-warning ml-3" role="alert">
                        This email has not been sent yet.
                        You can come back and edit it. When it's ready to be sent,
                        please contact support@grand-challenge.org to send it for you.
                </div>
                <div class="text-right">
                    <a href="{% url "emails:update" pk=object.pk %}"
                       class="btn btn-primary">
                        <i class="fa fa-edit"></i> Edit email
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}