{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block content %}
{% for review in reviews %}

<article class="media content-section">
    <img class="rounded-circle article-img" src="{{ review.reviewer_photo }}">
    <div class="media-body">
        <div class="article-metadata">
            <span class="mr-2"><b>{{ review.reviewer_name }}</b></span>
            <small class="text-muted">{{ review.update_time|date:"F d, Y" }}</small>
            <small class="text-muted"> at <b>{{ review.location.care_name }}</b></small>
            <span style="color: #a41515; float: right">{% for star in "x"|ljust:review.star_rating %} &#9733; {% endfor %}</span>
        </div>
        {% if review.comment %}
<!--            <a class="article-link" href="{% url 'predict' review.review_id %}" style="text-decoration: none; color: #232a31">-->
                <p class="article-content" onclick="">{{ review.comment }}</p>
<!--            </a>-->
        {% endif %}
        <form method="post" class="form" action="{% url 'un-replied-review' %}">
            {% csrf_token %}
                {{ form|crispy }}
            <input type="hidden" value="{{ review.review_id }}" name="review_id">
            <input class="btn btn-primary ml-2" style="float: right" type="submit", value="Submit"/>
            <a href="{% url 'predict' review.review_id %}" class="btn btn-info">Analyze</a>
        </form>
        </div>

</article>
{% endfor %}
    <div align="center">
        {% if reviews.has_other_pages %}

          {% if reviews.has_previous %}
            <a class="btn btn-outline-info mb-4" href="?page=1">First</a>
            <a class="btn btn-outline-info mb-4" href="?page={{ reviews.previous_page_number }}">Previous</a>
          {% endif %}

          {% for num in reviews.paginator.page_range %}
            {% if reviews.number == num %}
              <a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
            {% elif num > reviews.number|add:'-3' and num < reviews.number|add:'3' %}
              <a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
            {% endif %}
          {% endfor %}

          {% if reviews.has_next %}
            <a class="btn btn-outline-info mb-4" href="?page={{ reviews.next_page_number }}">Next</a>
            <a class="btn btn-outline-info mb-4" href="?page={{ reviews.paginator.num_pages }}">Last</a>
          {% endif %}

        {% endif %}
    </div>
{% endblock %}