{{- define "content" -}}
{{- $isAdmin := .Claims|isAdmin -}}
{{- $isParticipant := .Claims|isParticipant -}}
{{- $update := .Options.Get "update" -}}
<div class="container-fluid">
  {{- if $isAdmin -}}
  {{- if $update -}}
  {{template "breadcrumb" toSlice "Prove" (all "Response") (.Data|string) (.Data.ID|show "Response") "Aggiorna" "current"}}
  {{- else -}}
  {{template "breadcrumb" toSlice "Prove" (all "Response") "Aggiungi" "current"}}
  {{- end -}}
  {{- end -}}
  {{- if $isAdmin -}}
  {{template "add_update_header" dict "update" $update "addTitle" "Rispondi al questionario" "updateTitle" (printf "Aggiorna %s" (.Data|string))}}
  {{- end -}}
  {{- $form := "form_add_update" -}}
  <div class="row">
    <div class="col-2">
      <div class="sticky-top sticky-offset">
	<div class="card">
	  <div class="card-header">Explorer delle domande</div>
	  <div id="navbar_questions" class="list-group">
	    {{range $n, $question := .Data.Questions -}}
	    <a class="list-group-item list-group-item-action" href="#question_{{$n}}">Domanda {{$n|incr}}</a>
	    {{end -}}
	  </div>
	</div>
      </div>
    </div>
    <div class="col">
      <form
	class="needs-validation"
	action="{{if $update}}{{.Data.ID|update "Response"}}{{else}}{{create "Response"}}{{end}}"
	method="POST"
	role="form"
	id={{$form}}>
	<div data-spy="scroll" data-target="#navbar_questions" data-offset="0">
	{{range $id,$question := .Data.Questions -}}
	<div class="oef-anchor" id="question_{{$id}}"></div>
	<div class="oef-anchor-selection">
	  <div class="form-group p-3">
	    <p class="lead">{{$id|incr}}. {{$question.Text}}</p>
	{{range $answer := $question.Answers -}}
	<div class="form-check">
	  {{$checked := false}}
	  {{if isResponseIn $answer.ID $.Data.AnswersIDs}}
	  {{$checked = true}}
	  {{end}}
	  <input class="form-check-input" type="radio" name="SingleResponses.{{$id}}" id="answer_{{$answer.ID}}" value="{{$answer.ID}}" {{if $isParticipant}}required{{end}} {{if $checked}}checked{{end}}>
	  <label class="form-check-label {{if and $isAdmin $answer.Correct}}text-success{{end}}" for="answer_{{$answer.ID}}">
	    {{$answer}}
	  </label>
	</div>
	{{end}}
	  </div>
	</div>
	<hr>
	{{end}}
	</div>
      </form>
    </div>

    <div class="col-2">
      <div class="sticky-top sticky-offset">
	<div class="card">
	  <div class="card-header">
	    Informazioni sulla prova
	  </div>
	  <div class="card-body">
	    <dl>
	      <dt>Gara</dt><dd>{{.Data.Contest}}</dd>
	      <dt>Partecipante</dt><dd>{{.Data.Participant}}</dd>
	      {{- if $isParticipant -}}
	      <span id="timeleft" style="display: none">{{.Data.TimeLeft.Seconds|toInt}}</span>
	      <dt>Tempo rimanente</dt>{{if .Data.TimeLeft}}<dd><span id="timeleft_view"></span> minuti rimanenti</dd>{{else}}<dd>La gara è sempre attiva</dd>{{end}}
	      {{- end -}}
	    </dl>
	    <button type="submit" class="btn btn-primary" form="{{$form}}">Salva</button>
	    {{if $isAdmin}}<button id="reset_responses" class="btn btn-outline-secondary">Cancella risposte</button>{{end}}
	  </div>
	</div>
      </div>
    </div>

  </div>
</div>
{{ end -}}