{% import "admin/Macros/Buttons/_button.html.twig" as button %}
<div class="pt-3">
    <b class="mt-3">{{ app.user.username }}</b>
    <div>aus {{ app.user.profile.lage|default }}</div>
    <div class="mt-3 rate">
        Ihre Bewertung:
        <div data-score="0" class="star" {% if bewertungen.sterne >= '0' %} style="color: #FBBD00" {% endif %}></div>
        <div data-score="1" class="star" {% if bewertungen.sterne >= '1' %} style="color: #FBBD00" {% endif %}></div>
        <div data-score="2" class="star" {% if bewertungen.sterne >= '2' %} style="color: #FBBD00" {% endif %}></div>
        <div data-score="3" class="star" {% if bewertungen.sterne >= '3' %} style="color: #FBBD00" {% endif %}></div>
        <div data-score="4" class="star" {% if bewertungen.sterne >= '4' %} style="color: #FBBD00" {% endif %}></div>
        <div data-score="5" class="star" {% if bewertungen.sterne == '5' %} style="color: #FBBD00" {% endif %}></div>
    </div>
    <div class="mb-3">
        Kommentar:
    </div>
    <div>
        <input type="hidden" name="sterneScore" id="sterneScore" value="{{ bewertungen.sterne|default }}">
        <input type="hidden" name="bewerEdit" value="1">
        <textarea name="sterneText" required id="faq_antwort" class="w-100 text-editor"
                  rows="3">{{ bewertungen.text|striptags|raw|default() }}</textarea>
    </div>
</div>
<div class="modal-footer mt-4">
    <button type="button" class="btn md-btn md-btn-dismiss" data-dismiss="modal">
        <span>abbrechen</span>
    </button>
    <button type="submit" class="btn md-btn" data-toggle="modal" onclick="NewBewertungen()">
        <img src="{{ asset('assets/main/new/images/icon/green-tick.svg') }}" width="33" height="33" alt="weiter">
        <span>Bewertung sichern</span>
    </button>
</div>
{% block javascripts %}
    <script>
        $("#ajax-form").modal({
            backdrop: false,
            show: false
        }).on("show.bs.modal", function () {
            $(this).find(".modal-body").addClass("font-weight-light");
            $(this).find(".star").hover(function () {
                let index = $(this).index();
                $(this).parent().find(".star").css("color", "#D5D5D5").slice(0, (index + 1)).css("color", "#FBBD00");
                $("#sterneScore").val($(this).data("score"));
            });
        });
    </script>
{% endblock %}