{% extends 'base.html' %}
{% load bootstrap %}
{% block title %}- Rate restaurants!{% endblock %}

{% block body_block %}
    <div class="page-header">
                <h1>Rate restaurants!</h1>
    </div>
    <div align="right">
        <form method="post" action="." role="form" class="form-inline">
            {% csrf_token %}
            {{ form|bootstrap_horizontal }}
            <div class="form-group">
              <button type="submit" class="btn btn-default">Filter</button>
            </div>
        </form>
    </div>
	<div>
                {% if count > 0 %}
                    {% for rest in restaurants %}
                        {% if forloop.first %}<div class="row">{% endif %}
                        <div class="col-lg-6">
                            <div class="cliente">
                                <a style="text-align:center;" href="/restaurant/{{ rest.factual_id }}">
                                    <h3 class="display-4">{{ rest.name }}</h3>
                                </a>
                                <div class="container-fluid">
                                	<div class="row">
                                        <div class="col-md-3">
                                            <b>Location</b>
                                        </div>
                                        <div class="col-md-9">
                                            {{ rest.locality }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <b>Cuisine</b>
                                        </div>
                                        <div class="col-md-9">
                                            {{ rest.cuisines }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <b>Price</b>
                                        </div>
                                        <div class="col-md-9">
                                            {{ rest.priceRange }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <b>Rating</b>
                                        </div>
                                        <div class="col-md-9">
                                            {{ rest.rating }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <b>Serves alcohol</b>
                                        </div>
                                        <div class="col-md-9">
                                            {% if rest.alcohol %} Yes {% else %} No {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <div align="center">
                                    <h4>Rate the restaurant for the following situations</h4>
                                    {% if user.is_authenticated %}
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div align="center">
                                                    <b>Business</b>
                                                    <br>
                                                    <button id ="upvote{{rest.factual_id}}1" data-restid="{{rest.factual_id}}" data-context=1 class="btn btn-mini btn-success upvote" type="button">
                                                        <span class="glyphicon glyphicon-thumbs-up"></span>
                                                    </button>
                                                    <button id ="downvote{{rest.factual_id}}1" data-restid="{{rest.factual_id}}" data-context=1 class="btn btn-mini btn-danger downvote" type="button">
                                                        <span class="glyphicon glyphicon-thumbs-down"></span>
                                                    </button>
                                                </div>
                                            </div>
                                             <div class="col-md-3">
                                                <div align="center">
                                                    <b>Special</b>
                                                    <br>
                                                    <button id ="upvote{{rest.factual_id}}2" data-restid="{{rest.factual_id}}" data-context=2 class="btn btn-mini btn-success upvote" type="button">
                                                        <span class="glyphicon glyphicon-thumbs-up"></span>
                                                    </button>
                                                    <button id ="downvote{{rest.factual_id}}2" data-restid="{{rest.factual_id}}" data-context=2 class="btn btn-mini btn-danger downvote" type="button">
                                                        <span class="glyphicon glyphicon-thumbs-down"></span>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div align="center">
                                                    <b>Casual</b>
                                                    <br>
                                                    <button id ="upvote{{rest.factual_id}}3" data-restid="{{rest.factual_id}}" data-context=3 class="btn btn-mini btn-success upvote" type="button">
                                                        <span class="glyphicon glyphicon-thumbs-up"></span>
                                                    </button>
                                                    <button id ="downvote{{rest.factual_id}}3" data-restid="{{rest.factual_id}}" data-context=3 class="btn btn-mini btn-danger downvote" type="button">
                                                        <span class="glyphicon glyphicon-thumbs-down"></span>
                                                    </button>
                                                </div>
                                            </div>

                                            <div class="col-md-3">
                                                <div align="center">
                                                    <b>Romance</b>
                                                    <br>
                                                    <button id ="upvote{{rest.factual_id}}4" data-restid="{{rest.factual_id}}" data-context=4 class="btn btn-mini btn-success upvote" type="button">
                                                        <span class="glyphicon glyphicon-thumbs-up"></span>
                                                    </button>
                                                    <button id ="downvote{{rest.factual_id}}4" data-restid="{{rest.factual_id}}" data-context=4 class="btn btn-mini btn-danger downvote" type="button">
                                                        <span class="glyphicon glyphicon-thumbs-down"></span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% if forloop.counter|divisibleby:2 %}</div><div class="row">{% endif %}
                        {% if forloop.last %}</div>{% endif %}
                    {% endfor %}
                {% else %}
                    <strong>There are no matching restaurants for your search.</strong>
                {% endif %}

            </div>
{% endblock %}