{% extends 'private_template.html' %}
{% load static %}

{% block titulo %}Posts do Instagram{% endblock %}

{% block header %}
  {% include 'private_header.html' %}
{% endblock %}

{% block content %}
<div id="formulario-externo" class="central_pane p-0 pt-5">
    <div class="card col-md-8 mx-auto mt-5 p-0">
        <div id="card-panel" class="card col-md card-main mb-0">
            <div class="card-body col-md mt-3">
                <h2 class="mb-4">Posts Recentes</h2>

                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="{{ form.instagram_url.id_for_label }}">Link da Postagem</label>
                            <div class="input-group">
                                {{ form.instagram_url }}
                                <div class="input-group-append">
                                    <div class="input-group-text"><span class="fas fa-heading"></span></div>
                                </div>
                            </div>
                            {% if form.instagram_url.errors %}<small class="text-danger">{{ form.instagram_url.errors.0 }}</small>{% endif %}
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="{{ form.thumbnail.id_for_label }}">Imagem</label>
                            <div class="input-group">
                                {{ form.thumbnail }}
                                <div class="input-group-append">
                                    <div class="input-group-text"><span class="fas fa-file-upload"></span></div>
                                </div>
                            </div>
                            {% if form.thumbnail.errors %}<small class="text-danger">{{ form.thumbnail.errors.0 }}</small>{% endif %}
                        </div>
                    </div>

                    <div class="row justify-content-between mt-3">
                        <div class="col-md-4">
                            <a href="{% url 'listar_posts_instagram' %}" class="btn btn-dark btn-block">Cancelar</a>
                        </div>
                        <div class="col-md-4 offset-md-4">
                            <button type="submit" class="btn btn-warning btn-block">Salvar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}