<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NearBeach Kudos - rate us.</title>

    <!--
    Bootstrap and jquery are utilised throughout ALL of NearBeach
    -->
    {% load static %}
    <script src="{% static 'NearBeach/widgets/jquery/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static 'NearBeach/widgets/bootstrap/js/bootstrap.bundle.js' %}"></script>
    <link rel="stylesheet" href="{% static 'NearBeach/widgets/bootstrap/css/bootstrap.css' %}" />

    <style>
        .star{
          color: goldenrod;
          font-size: 2.0rem;
          padding: 0 1rem; /* space out the stars */
        }
        .star::before{
          content: '\2606';    /* star outline */
          cursor: pointer;
        }
        .star.rated::before{
          /* the style for a selected star */
          content: '\2605';  /* filled star */
        }

        .stars{
            counter-reset: rateme 0;
            font-size: 2.0rem;
            font-weight: 900;
        }
        .star.rated{
            counter-increment: rateme 1;
        }
        .stars::after{
            content: counter(rateme) '/5';
        }
    </style>
</head>
<body class="bg-light" style="padding-bottom: 200px;">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
        <div class="container">
            <a class="navbar-brand" href="javascript:void(0)">NearBeach - Kudos</a>
        </div>
    </nav>

    {{ kudos_read_only_form.media }}
    <div class="container">
        <div class="card mt-4">
            <div class="card-header">
                <h1>Project - {{ project_results.project_id }}</h1>
            </div>
            <div class="card-body">
                <h5>{{ project_results.project_name }}</h5>
                {{ kudos_read_only_form.project_description }}
                <table>
                    <tr><td>Organisation: {{ project_results.organisations_id }}</td></tr>
                    <tr><td>Project Status: Completed</td></tr>
                    <tr><td>Start Date: {{ project_results.project_start_date }}</td></tr>
                    <tr><td>End Date: {{ project_results.project_end_date }}</td></tr>
                </table>

                <!-- RATING -->
                <strong>Kudos Rating - how well did we do?</strong>
                {% for i in star_range %}
                    <span class="star rated"></span>
                {% endfor %}<br/>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <strong>Is there anything we can improve?</strong>
            </div>
            <div class="card-body">
                {{ kudos_read_only_form.improvement_note }}
            </div>
        </div>


        <div class="card mt-4">
            <div class="card-header">
                <strong>Is there anything you liked about our service?</strong>
            </div>
            <div class="card-body">
                {{ kudos_read_only_form.liked_note }}
            </div>
        </div>

        {% if kudos_results.extra_kudos %}
            <div class="card mt-4">
                <div class="card-header">
                    <strong>Extra Kudos</strong>
                </div>
                <div class="card-body">
                    Extra Kudos was given to staff member - {{ kudos_results.extra_kudos }}
                </div>
            </div>
        {% endif %}
    </div>
</body>
</html>