<form class="dialog-nouveau-repos">
  <div class="flexcol">
    <div class="flexrow">
      <img class="chat-icon" src="{{img}}" data-tooltip="{{name}}" />
      <h2>{{name}} se repose</h2>
    </div>
    <div class="form-group">
      <label>De l'heure</label>
      <select name="heure-debut">
        {{selectOptions hourDefinitions selected=heureDebutDefaut labelAttr='label' valueAttr='heure'}}
      </select>
      <label>à l'heure</label>
      <select name="heure-fin">
        {{selectOptions hourDefinitions selected=heureFinDefaut labelAttr='label' valueAttr='heure'}}
      </select>
    </div>
    <div class="form-group">
      <span>Durée : <strong><span id="duree-sommeil">0</span> heures</strong></span>
    </div>
    <div class="form-group">
      <input type="checkbox" name="reveil-force" id="reveil-force">
      <label for="reveil-force">Réveil forcé après</label>
      <input type="number" name="heures-force" value="1" min="1" max="12" disabled>
      <span>heures</span>
    </div>
    <div id="avertissements" class="hidden"></div>
  </div>
</form>
