{% extends 'base.html' %}

{% block content %}
    <h1>Article</h1>

    {% for message in messages %}
        <div class="alert alert-success">
            {{ message }}
        </div>
    {% endfor %}

    <h2>{{ article.title }}</h2>
    <p>{{ article.text }}</p>
    <p>By: {{ article.author }}</p>

    <h2>Tags</h2>
    <ul class="w-25">

        {% for tag in article.tags.all %}

            <li>{{ tag.name }}</li>

        {% endfor %}

    </ul>

    <div class="d-flex">

        {% if perms.webapp.change_article or article.author == user %}
            <a href="{% url 'articles_update' id=article.id %}" class="btn btn-primary me-3">
                Update
            </a>
        {% endif %}
            
        {% if perms.webapp.delete_article or article.author == user %}
            <form action="{% url 'articles_delete' id=article.id %}" method="post" onsubmit="return confirm('Delete?')">
                {% csrf_token %}
                <button class="btn btn-danger">Delete</button>
            </form>
        {% endif %}
    </div>

    <hr>

    <h3 class="mb-4">Comments</h3>

    <div class="w-50">
        {% url 'comments_add' article_id=article.id as comments_action_url %}
        {% include 'partial/form.html' with form=comments_form request_method='post' action_url=comments_action_url %}
    </div>

    {% for comment in comments %}

        <div class="card my-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div class="">{{ comment.author }}</div>

                <div class="d-flex">

                    <a href="{% url 'comments_update' article_id=article.id comment_id=comment.id %}" class="btn btn-warning me-4">
                        Update
                    </a>
                    
                    <form action="{% url 'comments_delete' article_id=article.id comment_id=comment.id %}" method="post" onsubmit="return confirm('Delete?')">
                        {% csrf_token %}

                        <button class="btn btn-danger">Delete</button>
                    </form>
                    
                </div>
            </div>

            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>{{ comment.text }}</p>
                    <footer class="blockquote-footer">
                        <cite title="Source Title">
                            {{ article.created_at }}
                        </cite>
                    </footer>
                </blockquote>
            </div>
        </div>
    
    {% empty %}
        
        <h5 class="my-5">No comments yet.</h5>

    {% endfor %}

{% endblock %}