{{define "content"}}
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
    <h1 class="text-2xl font-semibold text-gray-900">Organiser le covoiturage</h1>
</div>
<div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 md:px-8">
  {{template "journey_preview" (dict "journey" .ViewState.journey "driver" .ViewState.driver "passenger" .ViewState.passenger "beneficiaries" .ViewState.beneficiaries "passenger_wallet_balance" .ViewState.passenger_wallet_balance "pricing_result" .ViewState.pricing_result)}}
{{if ne .ViewState.passenger.ID ""}}
<div class="max-w-7xl m-auto px-4 sm:px-6 md:px-8 flex flex-col justify-items-center">
  {{if .ViewState.passenger}}
  {{if lt .ViewState.passenger_wallet_balance .ViewState.pricing_result.passenger.Amount}}
    <p class="text-xl text-co-red text-center p-4">Le solde du compte mobilité est insuffisant.</p>
    {{end}}
  {{end}}
  <form method="POST">
    <div class="m-auto text-center">
      <label for="motivation" class="block text-sm font-medium text-gray-700">Motif du trajet</label>
      <select name="motivation" id="motivation"
          class="p-2 mt-1 mb-4 focus:ring-co-blue focus:border-co-blue block shadow-sm sm:text-sm  rounded-2xl bg-white m-auto">
        {{range .ViewState.booking_motivations}}
        <option value="{{.value}}"{{if eq .value ""}} selected="selected"{{end}}>{{.label}}</option>
        {{end}}
      </select>
    </div>
    {{template "submit_with_sms"
      dict  "IconSet" .IconSet
            "Viewstate" .ViewState
            "ComponentState" (dict "submitText" "Envoyer la demande de covoiturage"
                                   "doNotSendOption" true)
            "SMSState" (dict "name" (.ViewState.config.GetString "service_name")
                             "datetime" (or (timeFormat .ViewState.journey.ExtraMembers.departure_date "02/01/2006") "À définir")
                             "baseUrl" (.ViewState.config.GetString "base_url") )}}
  </form>
</div>
{{end}}

{{end}}
