{% extends 'postings/frontend/base_page.html' %}

{# Load static tag so that images and custom scripts from /static/ can be used. #}
{% load static %}

{% block page_title %}
    RMC - {{ entity.name }}
{% endblock %}

{% block content %}
<div class="container entity">
    {% block entity_info %}
        <div class="row">
            <div class="col-sm-6">
                <h1 class="muted text-center">{{ entity.name }}</h1>
            </div>
        </div>
    {% endblock %}
    <hr>
    <div class="row">
        <div class="col-sm-3">
            <div class="rating-block" data-rating="{{ entity.average_rating|floatformat:"-2" }}">
                <h4>Average user rating</h4>
                <h2 class="bold padding-bottom-7">{{ entity.average_rating|floatformat:"-2" }} <small>/ 5</small></h2>
            </div>
        </div>
        {# Rating Distribution Display #}
        <div class="col-sm-3">
            <h4>Rating breakdown</h4>
            <div class="pull-left">
                <div class="pull-left" style="width:35px; line-height:1;">
                    <div style="height:9px; margin:5px 0;">5 <span class="glyphicon glyphicon-star"></span></div>
                </div>
                <div class="pull-left" style="width:180px;">
                    <div class="progress" style="height:9px; margin:8px 0;">
                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5" style="width: {{ entity.rating_distribution.4.1 }}%">
                            <span class="sr-only">80% Complete (danger)</span>
                        </div>
                    </div>
                </div>
                <div class="pull-right" style="margin-left:10px;">{{ entity.rating_distribution.4.0 }}</div>
            </div>
            <div class="pull-left">
                <div class="pull-left" style="width:35px; line-height:1;">
                    <div style="height:9px; margin:5px 0;">4 <span class="glyphicon glyphicon-star"></span></div>
                </div>
                <div class="pull-left" style="width:180px;">
                    <div class="progress" style="height:9px; margin:8px 0;">
                        <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="4" aria-valuemin="0" aria-valuemax="5" style="width: {{ entity.rating_distribution.3.1 }}%">
                            <span class="sr-only">80% Complete (danger)</span>
                        </div>
                    </div>
                </div>
                <div class="pull-right" style="margin-left:10px;">{{ entity.rating_distribution.3.0 }}</div>
            </div>
            <div class="pull-left">
                <div class="pull-left" style="width:35px; line-height:1;">
                    <div style="height:9px; margin:5px 0;">3 <span class="glyphicon glyphicon-star"></span></div>
                </div>
                <div class="pull-left" style="width:180px;">
                    <div class="progress" style="height:9px; margin:8px 0;">
                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5" style="width: {{ entity.rating_distribution.2.1 }}%">
                            <span class="sr-only">80% Complete (danger)</span>
                        </div>
                    </div>
                </div>
                <div class="pull-right" style="margin-left:10px;">{{ entity.rating_distribution.2.0 }}</div>
            </div>
            <div class="pull-left">
                <div class="pull-left" style="width:35px; line-height:1;">
                    <div style="height:9px; margin:5px 0;">2 <span class="glyphicon glyphicon-star"></span></div>
                </div>
                <div class="pull-left" style="width:180px;">
                    <div class="progress" style="height:9px; margin:8px 0;">
                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="5" style="width: {{ entity.rating_distribution.1.1 }}%">
                            <span class="sr-only">80% Complete (danger)</span>
                        </div>
                    </div>
                </div>
                <div class="pull-right" style="margin-left:10px;">{{ entity.rating_distribution.1.0 }}</div>
            </div>
            <div class="pull-left">
                <div class="pull-left" style="width:35px; line-height:1;">
                    <div style="height:9px; margin:5px 0;">1 <span class="glyphicon glyphicon-star"></span></div>
                </div>
                <div class="pull-left" style="width:180px;">
                    <div class="progress" style="height:9px; margin:8px 0;">
                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="5" style="width: {{ entity.rating_distribution.0.1 }}%">
                            <span class="sr-only">80% Complete (danger)</span>
                        </div>
                    </div>
                </div>
                <div class="pull-right" style="margin-left:10px;">{{ entity.rating_distribution.0.0 }}</div>
            </div>
        </div>
    </div>





    <div class="row">
        <div class="col-sm-7">
            <hr/>
            <div id="review_container" class="review-block">
                <div class="row" style="margin-top:40px;">
                    <div class="col-md-12">
                        <div class="well-sm">
                            <div class="text-right">
                                <a class="btn btn-success btn-green" href="#reviews-anchor" id="open-review-box">Leave a Review</a>
                            </div>

                            {# New Review input form. Hidden by default. #}
                            <div class="row" id="post-review-box" style="display:none;">
                                <div class="col-md-12">
                                    <form method="post" action="/reviews">
                                        <p class="text-right date"></p>

                                        {# Username input #}
                                        <div class="form-group">
                                            <label for="name_input">Name (Optional):</label>
                                            <input type="text" class="form-control" placeholder="Name..." id="name_input" name="name">
                                        </div>

                                        {# Title input #}
                                        <div class="form-group">
                                            <label for="title_input">Title:</label>
                                            <input type="text" class="form-control" placeholder="Title..." id="title_input" name="title" required>
                                        </div>

                                        {# Content input #}
                                        <div class="form-group">
                                            <label for="content_input">Review:</label>
                                            <textarea class="form-control animated" rows="3" id="content_input" name="content" placeholder="Enter your review here..." required></textarea>
                                        </div>

                                        <div class="text-right">
                                            {# Rating input with star boxes. #}
                                            <div class="stars starrr" data-rating="0"></div>
                                            
                                            {# Close the input form with this anchor-link. #}
                                            <a class="btn btn-danger btn-sm" href="#" id="close-review-box" style="display:none; margin-right: 10px;">
                                                <span class="glyphicon glyphicon-remove"></span>
                                                Cancel
                                            </a>

                                            {# Hidden values that need to be posted with user content. #}
                                            <input type="hidden"  id="rating_input" name="rating" value="1">
                                            <div id="csrf-token">{% csrf_token %}</div>
                                            <input type="hidden" name="entity_id" value="{{ entity.pk }}">

                                            {# Submit the form #}
                                            <button class="btn btn-success btn-lg" type="submit">Save</button>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {% for review in reviews %}
                    {% include "postings/frontend/review.html" with review=review only %}
                {% endfor %}
            </div>

        </div>
    </div>


{% endblock %}

{% block extra_js %}
    <script src="{% static 'postings/js/voting.js' %}"></script>
{% endblock %}