{% extends 'base.html' %}

{% block body %}

    <div id="titulo-secction" class="row justify-content-center">
        <div class="col align-self-center ">
            <div class="card">
                <div class="card-body">
                    <span class="bmd-help error"></span>
                    <fieldset class="form-group">
                        <label class="bmd-label-floating" for="inputTitulo">Titulo</label>
                        <input class="form-control mt-2" type="text" name="titulo" id="inputTitulo" autofocus value="{{ pagina.titulo }}">
                    </fieldset>
                    <fieldset class="form-group">
                        <label class="bmd-label-floating" for="inputSubtitulo">Subtitulo</label>
                        <textarea class="form-control mt-2" type="text" name="subtitulo" id="inputSubtitulo" rows="10" autofocus >{{ pagina.subtitulo }}</textarea>
                    </fieldset>
                    <fieldset class="form-group">
                        <label class="bmd-label-floating" for="inputCuerpo">Cuerpo</label>
                        <textarea class="form-control mt-2" type="text" name="cuerpo" id="inputCuerpo" rows="10" autofocus >{{ pagina.cuerpo }}</textarea>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block action_buttons %}
    {% if user.is_authenticated %}
        <a href="javascript:void(0);" onclick="action_submit()" style="margin-bottom: 100px">
            <button  type="button" class="btn btn-secondary bmd-btn-fab">
                <i class="fa fa-floppy-o" aria-hidden="true" style="color: black!important;"></i>
            </button>
        </a>
    {% endif %}

{% endblock %}

{% block javascripts %}

    <script type="text/javascript">
        function action_submit(){
            var titulo = document.getElementById('inputTitulo').value;
            var subtitulo = document.getElementById('inputSubtitulo').value;
            var cuerpo = document.getElementById('inputCuerpo').value;

            var data_dict = {'titulo': titulo, 'subtitulo': subtitulo, 'cuerpo': cuerpo}

            $.ajax({
                url: "{% url 'submitPaginaPrincipal' %}",
                type: "POST",
                data: data_dict,
                success : function(json,data) {
                    location.href = "{% url 'paginaPrincipal' %}"
                },
                error : function(xhr, errmsg, err) {
                    alert("Drawing could not be saved!");
                }
            });
        }
    </script>
{% endblock %}