<div class="comments-content">
    <!-- comment header -->
    <div class="comments-header has-text-centered">
        <p class="title is-4">{{ _('Publicar un comentario en "%(title)s"', title=article.title) }}</p>
    </div>
    <div class="comments-wrapper">
        <!-- comments content -->
        <div class="comments-content">
            <!-- form begin -->
            <form id="commentform" method="POST" action="{{ SITEURL }}/vendor/form-comments/commentsubmit.php">
                <input type="hidden" name="post_id" value="{{ article.url }}"/>
                {% if RELATIVE_URLS == False %}
                    <input type="hidden" name="return_url" value="{{ SITEURL }}/{{ article.url }}"/>
                {% else %}
                    <input type="hidden" name="return_url" value="../../{{ article.url }}"/>
                {% endif %}
                <div class="field is-horizontal">
                    <div class="field-label is-normal">
                        <label class="has-text-white" for="name">{{ _('Nombre') }}</label>
                    </div>
                    <div class="field-body">
                        <div class="field">
                            <div class="control">
                                <input id="name"
                                       class="input"
                                       type="text"
                                       name="name"
                                       placeholder="{{ _('Su nombre o nick') }}"/>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="field is-horizontal">
                    <div class="field-label is-normal">
                        <label class="has-text-white" for="email">{{ _('Email') }}</label>
                    </div>
                    <div class="field-body">
                        <div class="field">
                            <div class="control">
                                <input id="email"
                                       class="input"
                                       type="email"
                                       name="email"
                                       placeholder="{{ _('E-mail (requerido, no será publicado)') }}"/>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="field is-horizontal">
                    <div class="field-label is-normal">
                        <label class="has-text-white" for="web">{{ _('Sitio Web') }}</label>
                    </div>
                    <div class="field-body">
                        <div class="field">
                            <div class="control">
                                <input id="web"
                                       class="input"
                                       type="url"
                                       name="link"
                                       placeholder="{{ _('Su sitio web (opcional)') }}"/>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="warning-sp">
                    <div class="field-label is-normal">
                        <label for="empty">{{ _('Deja esto vacío:') }}</label>
                    </div>
                    <input id="empty" type="text" name="url" />
                </div>

                <div class="field is-horizontal">
                    <div class="field-label is-normal">
                        <label class="has-text-white" for="comment">{{ _('Comentario') }}</label>
                    </div>
                    <div class="field-body">
                        <div class="field">
                            <div class="control">
                                <textarea id="comment"
                                          class="textarea"
                                          name="comment"
                                          placeholder="{{ _('Agrega un comentario...') }}"></textarea>
                            </div>
                            <p>{{ _('Puede formatear su comentario con') }}
                                {% if DEFAULT_LANG == 'de' %}
                                    <a href="https://de.wikipedia.org/wiki/Markdown"
                                       rel="noopener noreferrer" target="_blank">Markdown</a>.
                                {% elif DEFAULT_LANG == 'en' %}
                                    <a href="https://en.wikipedia.org/wiki/Markdown"
                                       rel="noopener noreferrer" target="_blank">Markdown</a>.
                                {% elif DEFAULT_LANG == 'eo' %}
                                    <a href="https://epo.wikitrans.net/Markdown"
                                       rel="noopener noreferrer" target="_blank">Markdown</a>.
                                {% elif DEFAULT_LANG == 'es' %}
                                    <a href="https://es.wikipedia.org/wiki/Markdown"
                                       rel="noopener noreferrer" target="_blank">Markdown</a>.
                                {% elif DEFAULT_LANG == 'fr' %}
                                    <a href="https://fr.wikipedia.org/wiki/Markdown"
                                       rel="noopener noreferrer" target="_blank">Markdown</a>.
                                {% endif %}
                                {{ _('Avatar desde') }}
                                <a href="https://libravatar.org"
                                   rel="noopener noreferrer" target="_blank">Libravatar</a>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="field is-horizontal">
                    <div class="field-label">
                        <!-- Left empty for spacing -->
                    </div>
                    <div class="field-body">
                        <div class="field">
                            <p class="control">
                                <input class="button is-button-grey" name="submit" type="submit" value="{{ _('Enviar comentario') }}"/>
                                <!-- Política de Uso -->
                                {% if DEFAULT_LANG == 'en' %}
                                    <a href="{{ SITEURL}}/pages/usage-policy.html">{{ _('Política de uso') }}</a>
                                {% elif DEFAULT_LANG == 'fr' %}
                                    <a href="{{ SITEURL}}/pages/politica-de-uso-es.html">{{ _('Política de uso') }}</a>
                                {% elif DEFAULT_LANG == 'eo' %}
                                    <a href="{{ SITEURL}}/pages/regularo-pri-uzado.html">{{ _('Política de uso') }}</a>
                                {% else %}
                                    <a href="{{ SITEURL}}/pages/politica-de-uso.html">{{ _('Política de uso') }}</a>
                                {% endif %}
                                <!-- /Política de Uso -->
                            </p>
                        </div>
                    </div>
                </div>
            </form>
            <!-- form end -->
        </div>
    </div>
</div>

{% if article.comments %}
    <div class="comments-content" itemscope itemtype="https://schema.org/UserComments">
        <!-- comment header -->
        <div class="comments-header has-text-centered">
            <p class="title is-4">{{ _('Comentarios') }}</p>
        </div>
        <div class="comments-wrapper">
            <!-- comments content -->
            <div class="comments-content">
                <!-- end of comment header -->
                {% for comment in article.comments %}
                    <!-- start of comment -->
                    <div class="media" id="comment-{{comment.slug}}">
                        <!-- comment user image -->
                        <figure class="media-left">
                            <p class="image is-64x64">
                                {% if comment.avatar %}
                                    <img src="{{ comment.avatar }}"
                                         alt="{{ _('Avatar de %(user)s', user=comment.author) }}"
                                         title="{{ _('Avatar de %(user)s', user=comment.author) }}">
                                {% else %}
                                    <img src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/avatar/avatar.png"
                                         alt="{{ _('Avatar predeterminado para %(user)s', user=comment.author) }}"
                                         title="{{ _('Avatar predeterminado para %(user)s', user=comment.author) }}">
                                {% endif %}
                            </p>
                        </figure>
                        <!-- end of comment user image -->

                        <!-- comment content -->
                        <div class="media-content">
                            <div class="content">
                                <div class="content" itemprop="creator" itemscope itemtype="https://schema.org/Person">
                                    {% if comment.web %}
                                        <p itemprop="name">
                                            <strong>
                                                <a href="{{ comment.web }}"
                                                   rel="noopener noreferrer"
                                                   target="_blank">{{ comment.author }}</a>
                                            </strong>
                                        </p>
                                    {% else %}
                                        <p itemprop="name"><strong>{{ comment.author }}</strong></p>
                                    {% endif %}
                                </div>
                                <div class="content" itemprop="commentText">
                                    {{ comment.content }}
                                </div>
                                <time class="entry-date published" itemprop="commentTime" datetime="{{ comment.date.isoformat() }}">
                                    <small>
                                        <a href="{{ SITEURL }}/{{ article.url }}#comment-{{comment.slug}}" title='Permalink'>
                                            <abbr title='{{ comment.date|strftime("%Y-%m-%d-T%H-%M-%S") }}'>{{ _('Enlace Permanente') }}</abbr>
                                        </a> | {{ comment.date|strftime("%H:%M:%S") }}
                                    </small>
                                </time>
                            </div>
                        </div>
                        <!-- end of comment content -->
                    </div>
                    <!-- end of comments -->
                {% endfor %}
            </div>
        </div>
    </div>
{% endif %}
