{% extends 'base.html' %}
{% load form_tags widget_tweaks martortags %}

{% block title %}{% if '/new' in request.path %}Create a new Page{% else %}Edit Page{% endif %}{% endblock %}

{% block breadcrumb %}
    <li class="breadcrumb-item"><a href="{% url 'home' %}">Index</a></li>
    {% if '/new' in request.path %}
        <li class="breadcrumb-item active">New page</li>
    {% else %}
        <li class="breadcrumb-item active">Edit page</li>
    {% endif %}
{% endblock %}

{% block content %}
    <div class="row justify-content-center">
        <div class="col-lg-11 col-md-11 col-sm-11">
            <div class="card bg-dark border-dark">
                <div class="card-header bg-dark text-light">
                    <div class="card-title">
                        {% if '/new' in request.path %}
                            New Page
                        {% else %}
                            Edit Page
                        {% endif %}
                    </div>
                </div>
                <form method="post" enctype="multipart/form-data" novalidate>
                    {% csrf_token %}
                    {% if form.non_field_errors %}
                        <div class="alert alert-danger" role="alert">
                            {% for error in form.non_field_errors %}
                                <p{% if forloop.last %} class="mb-0"{% endif %}>{{ error }}</p>
                            {% endfor %}
                        </div>
                    {% endif %}
                    <div class="card-body bg-light">
                        <!-- Page name -->
                        {{ form.page_name.label_tag }}
                        {% render_field form.page_name class=form.page_name|input_class %}
                        {% for error in form.page_name.errors %}
                            <div class="invalid-feedback">
                                {{ error }}
                            </div>
                        {% endfor %}
                        {% if form.page_name.help_text %}
                            <small class="form-text text-muted">
                                {{ form.page_name.help_text|safe }}
                            </small>
                        {% endif %}
                        <!-- Page logo -->
                        <div>
                            {{ form.logo.label_tag }}
                            {% render_field form.logo %}
                            {% for error in form.logo.errors %}
                                <div class="invalid-feedback">
                                    {{ error }}
                                </div>
                            {% endfor %}
                            {% if form.logo.help_text %}
                                <small class="form-text text-muted">
                                    {{ form.logo.help_text|safe }}
                                </small>
                            {% endif %}
                        </div>
                        <!-- Page description -->
                        {{ form.description.label_tag }}
                        {% render_field form.description class=form.description|input_class %}
                        {% for error in form.description.errors %}
                            <div class="invalid-feedback">
                                {{ error }}
                            </div>
                        {% endfor %}
                        {% if form.description.help_text %}
                            <small class="form-text text-muted">
                                {{ form.description.help_text|safe }}
                            </small>
                        {% endif %}
                        <!-- Page is_mainpage -->
                        <div class="form-check">
                            {% render_field form.is_mainpage class=form.is_mainpage|input_class %}
                            {{ form.is_mainpage.label_tag }}
                            {% for error in form.is_mainpage.errors %}
                                <div class="invalid-feedback">
                                    {{ error }}
                                </div>
                            {% endfor %}
                            {% if form.is_mainpage.help_text %}
                                <small class="form-text text-muted">
                                    {{ form.is_mainpage.help_text|safe }}
                                </small>
                            {% endif %}
                        </div>
                        <!-- Page content -->
                        {{ form.content.label_tag }}
                        {% render_field form.content class=form.description|input_class %}
                        {% for error in form.content.errors %}
                            <div class="invalid-feedback">
                                {{ error }}
                            </div>
                        {% endfor %}
                        {% if form.content.help_text %}
                            <small class="form-text text-muted">
                                {{ form.content.help_text|safe }}
                            </small>
                        {% endif %}
                    </div>
                    <div class="card-footer bg-dark">
                        <div id="container-fluid">
                            <div class="row">
                                <div class="col-9"></div>
                                <div class="col-2 btn-group">
                                    {% if page.slug %}
                                        <a href="{%  url 'pages.view.page' page.slug %}" class="btn btn-danger">Cancel</a>
                                    {% else %}
                                        <a href="{%  url 'home' %}" class="btn btn-danger">Cancel</a>
                                    {% endif %}
                                    <button type="submit" class="btn btn-success">{% if '/create' in request.path %}Create{% else %}Save{% endif %}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}