{{ block title }}
    Runde {{round_display}}: Bewertung des Transaktionspartners
{{ endblock }}
{{block style}}
<style>
  *{
    margin: 0;
    padding: 0;
}
.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ffc700;
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}


.btn {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #0056b3;
}
</style>
{{endblock}}
{{ block content }}
<div style="text-align: justify">
    Bitte bewerten Sie nun auf einer Skala von <b> 1 (= sehr unzufrieden) </b> bis <b>5 (= überaus zufrieden) </b> Sternen, wie zufrieden Sie mit der Leistung des {{opposite}}{{suffix}} gewesen sind.
    <br><br> Zur Erinnerung: Eine einmal abgegebene Bewertung kann nicht geändert oder gelöscht werden.
    Erst wenn Sie und der {{opposite}} eine Bewertung abgegeben haben, werden die Bewertungen sichtbar. Für die anderen Marktteilnehmer ist Ihre Einzelbewertung nicht verfügbar, lediglich die Durchschnittsbewertung aller bisherigen Runden.
</div><br><br>
<!--rating Page aus RatingGroupMember aus social_proximity_part2 übernehmen. Sah da schon sehr gut aus!-->
 <div class="rate">
    <input type="radio" id="star5" name="rating" value="5" />
    <label for="star5" title="text">5 Sterne (überaus zufrieden)</label>
    <input type="radio" id="star4" name="rating" value="4" />
    <label for="star4" title="text">4 Sterne</label>
    <input type="radio" id="star3" name="rating" value="3" />
    <label for="star3" title="text">3 Sterne</label>
    <input type="radio" id="star2" name="rating" value="2" />
    <label for="star2" title="text">2 Sterne</label>
    <input type="radio" id="star1" name="rating" value="1" />
    <label for="star1" title="text">1 Stern (sehr unzufrieden)</label>
  </div>
<br><br>
<div id="nextButtonDiv">
    <button class="btn btn-primary" onclick="submitRating()">Bewertung abgeben</button>
</div>
{{ formfield_errors 'rating' }}
{{endblock}}
{{block script}}
  <script>
    function submitRating() {

        //1zu1 von social_proximity_part2\RatingGroupMmeber übernommen
      var ratingSelected = false;
      var ratingInputs = document.getElementsByName('rating');

      for (var i = 0; i < ratingInputs.length; i++) {
        if (ratingInputs[i].checked) {
          ratingSelected = true;
          break;
        }
      }

      if (!ratingSelected) {
        // Display an error message to the user
        alert('Bitte wählen Sie mindestens einen Stern aus.');
      }
    }
  </script>

{{endblock}}