{% extends 'base.html.twig' %}

{% block body %}

	<nav class="breadcrumb bg-white push">
		<a class="breadcrumb-item" href="{{ path('home')}}">Início</a>
		<a class="breadcrumb-item" href="{{ path('transporte_index')}}">Transportes</a>
		<a class="breadcrumb-item" href="{{ path('transporte_show', {'token': avaliacao.transporte.token}) }}">{{ avaliacao.transporte.ordem }}</a>
		<span class="breadcrumb-item active">Avaliação</span>
	</nav>
	<div class="block">
		<div class="block-header block-header-default">
			<h3 class="block-title">Avaliação</h3>
			<div class="block-options">
				<a type="button" class="btn btn-sm btn-secondary" href="{{ path('avaliacao_edit', {'token': avaliacao.token}) }}">
					Editar
				</a>
			</div> 
		</div>
		<div class="block-content block-content-full">
			<table class="table">
				<tbody>
					<tr>
						<th>Avaliação:</th>
						<td><input id="avaliacao" value="{{ avaliacao.rating }}" class="rating-loading"></td>
					</tr>
					<tr>
						<th>Comentário:</th>
						<td>{{ avaliacao.comentario }}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

{% endblock %}
{% block javascripts %}
<script>
$(document).ready(function() {
    $('.m_transporte').addClass("open");
	
	$("#avaliacao").rating({
		clearCaption: '-',
		language: 'pt',
        step: 1,
        starCaptions: {1: 'Muito Mau', 2: 'Mau', 3: 'Ok', 4: 'Bom', 5: 'Muito Bom'},
        starCaptionClasses: {1: 'text-danger', 2: 'text-danger', 3: 'text-warning', 4: 'text-success', 5: 'text-success'},
		showClear: false,
		size: 'sm',
		displayOnly: true
    });
} );
</script>
{% endblock %}
{% block stylesheets %}

{% endblock %}