{% extends 'base.html' %}
{% block content %}
    <div class="card mb-3">
        <h3 class="card-header">Animation by {{ item.uploader.name }}</h3>
        <div class="card-body">
            <h4>
                {{ item.name }}
            </h4>

            <img src="{{ url_for('ContentView:preview', id_=item.id) }}" class="card-img" style="padding: 30px"
                 alt="{{ item.name }}">

            <div class="card-text text-center">
                {% if can_download %}
                    <a href="{{ url_for('ContentView:caff', id_=item.id) }}" class="btn btn-lg btn-success"
                       target="_self">Download</a>
                {% else %}
                    <a href="#" class="btn btn-lg btn-primary" target="_blank">Purchase</a>
                {% endif %}
            </div>
        </div>
        <div class="card-footer text-muted">
            Uploaded: {{ item.upload_date }}
        </div>
    </div>

    {% if current_user.is_authenticated %}
        <div class="card my-2">
            <div class="card-body">
                <form method="post" action="">
                    <fieldset>
                        <legend>Write a comment</legend>
                        <div class="form-group">
                            <textarea class="form-control" id="commentTextarea" rows="3"
                                      placeholder="Type your comment here" name="comment"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </fieldset>
                </form>
            </div>
        </div>
    {% endif %}

    {% if item.comments %}
        {% for comment in item.comments %}
            <div class="card my-2">
                <div class="card-body">
                    <h4 class="card-title">{{ comment.commenter.name }}</h4>
                    <h6 class="card-subtitle mb-2 text-muted">{{ comment.date }}</h6>
                    <p class="card-text">{{ comment.text }}</p>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="card my-2">
            <div class="card-body">
                <p>No comments yet.</p>
            </div>
        </div>
    {% endif %}
    <div class="my-4"></div>
{% endblock %}