<!-- When modal is open add .dso-modal-open to body -->

<body class="dso-modal-open">
    <!-- Modal markup. Can be placed anywhere inside <body> -->
    <div class="dso-modal" tabindex="-1" role="dialog" aria-labelledby="modal-close">
        <div class="dso-dialog" role="document">
            <div class="dso-header">
                <h2 id="modal-close">Activiteit toevoegen</h2>
                <button type="button" class="dso-close" aria-label="Sluiten"></button>
            </div>
            <div class="dso-body">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

            </div>
            <div class="dso-footer">
                <button type="submit" class="btn btn-primary">
                    Toevoegen
                </button>
                <button type="button" class="btn btn-link">
                    <span class="icon fas fa-times" aria-hidden="true"></span>
                    Annuleren
                </button>

            </div>
        </div>
    </div>
    <div class="container">
        <!-- Page content -->
        <form>
            <fieldset class="dso-form-fields">
                <legend class="sr-only">Vertical Form</legend>
                <fieldset>
                    <legend>Contact</legend>
                    <div class="form-group dso-input dso-input-text dso-required">
                        <div class="dso-label-container">
                            <label for="voornaam" class="control-label">
                                Voornaam
                            </label>
                        </div>
                        <div class="dso-field-container">
                            <input type="text" id="voornaam" class="form-control" required />
                        </div>
                    </div>
                    <div class="form-group dso-input dso-input-text">
                        <div class="dso-label-container">
                            <label for="achternaam" class="control-label">
                                Achternaam
                            </label>
                        </div>
                        <div class="dso-field-container">
                            <input type="text" id="achternaam" class="form-control" />
                            <p class="dso-help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p>
                        </div>
                    </div>
                    <div class="form-group dso-static">
                        <div class="dso-label-container">
                            <label class="control-label">Geslacht</label>
                        </div>
                        <div class="dso-field-container">
                            <p>Man</p>
                        </div>
                    </div>
                    <div class="form-group dso-input dso-input-text has-feedback">
                        <div class="dso-label-container">
                            <label for="geboortedatum" class="control-label">
                                Geboortedatum
                            </label>
                        </div>
                        <div class="dso-field-container">
                            <input type="text" id="geboortedatum" class="form-control" />
                            <span class="fas fa-calendar form-control-feedback" aria-hidden="true"></span>
                        </div>
                    </div>
                    <div class="form-group dso-input dso-input-text dso-required">
                        <div class="dso-label-container">
                            <label for="email" class="control-label">
                                E-mailadres
                            </label>
                        </div>
                        <div class="dso-field-container">
                            <input type="text" id="email" class="form-control" required />
                        </div>
                    </div>
                    <div class="form-group dso-input dso-input-text">
                        <div class="dso-label-container">
                            <label for="password" class="control-label">
                                Wachtwoord
                            </label>
                        </div>
                        <div class="dso-field-container">
                            <input type="text" id="password" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group dso-input dso-input-text">
                        <div class="dso-label-container">
                            <label for="password_bevestig" class="control-label">
                                Wachtwoord (bevestig)
                            </label>
                        </div>
                        <div class="dso-field-container">
                            <input type="text" id="password_bevestig" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group dso-confirm">
                        <div class="dso-field-container">
                            <div class="dso-selectable">
                                <input type="checkbox" id="nieuwsbrief" name="" value="" />
                                <label for="nieuwsbrief">
                                    Stuur mij de maandelijkse nieuwsbrief
                                </label>
                            </div>
                            <p class="dso-help-block" id="helpTextId_nieuwsbrief">Uw gegevens zullen niet worden gedeeld met derden</p>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>Bijlagen</legend>
                    <div class="form-group dso-files">
                        <div class="dso-description dso-rich-content">
                            Geef een tekening van de nieuwe situatie in 1:100. Een situatietekening geeft een schets van de bestaande en de nieuwe situatie met daarop duidelijk de maatvoering en de schaalaanduiding (1:100).
                        </div>
                        <ul class="dso-filelist">
                            <li>
                                <div class="dso-filename">
                                    Schetsen_en_foto’s_1.pdf
                                </div>
                                <div class="dso-confidential dso-selectable">
                                    <input type="checkbox" id="input-confirm-0" name="" value="" />
                                    <label for="input-confirm-0">
                                        Vertrouwelijk
                                    </label>
                                </div>
                                <button type="button" class="btn btn-link dso-remove">
                                    Verwijder document
                                </button>
                            </li>
                            <li>
                                <div class="dso-filename">
                                    Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
                                </div>
                                <div class="dso-confidential dso-selectable">
                                    <input type="checkbox" id="input-confirm-1" name="" value="" checked />
                                    <label for="input-confirm-1">
                                        Vertrouwelijk
                                    </label>
                                </div>
                                <span class="di di-warning" aria-hidden="true"></span>
                                <button type="button" class="btn btn-link dso-remove">
                                    Verwijder document
                                </button>
                            </li>
                        </ul>
                        <div class="alert alert-warning">
                            <p>U vraagt of wij een document vertrouwelijk willen behandelen. Hiervoor moet u twee dingen doen:</p>
                            <ol>
                                <li>Voeg ook een publiceerbaar document zonder vertrouwelijke informatie toe.</li>
                                <li>Geef per document de reden op als toelichting op het verzoek in de laatste stap van uw aanvraag.</li>
                            </ol>
                            <p>Er zal worden beoordeeld of uw vraag terecht is. U krijgt hiervan bericht.</p>
                        </div>

                        <!-- To use an input type="file" element -->
                        <div class="dso-file-upload">
                            <input type="file" id="file-upload" />
                            <label class="btn btn-link" for="file-upload">
                                <span class="icon fa fa-plus"></span>
                                Document toevoegen
                            </label>
                        </div>

                        <!-- Or to trigger the upload using a button element (not recommended) -->
                        <!--
              <button type="button" class="btn btn-link" >
                  <span class="icon fa fa-plus" aria-hidden="true"></span>
                Document toevoegen
              </button>
            -->
                    </div>
                </fieldset>
                <fieldset>
                    <legend>Beleg</legend>
                    <div class="form-group dso-select dso-multiple">
                        <div class="dso-label-container">
                            <label for="beleg" class="control-label">
                                Beleg
                            </label>
                        </div>
                        <div class="dso-field-container">
                            <select id="beleg" class="form-control" multiple>
                                <optgroup label="Vlees">
                                    <option value="worst">Worst</option>
                                    <option value="salami">Salami</option>
                                    <option value="geit">Geit</option>
                                </optgroup>
                                <optgroup label="Vis">
                                    <option value="zalm">Zalm</option>
                                    <option value="makreel">Makreel</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>Auto merk</legend>
                    <div class="form-group dso-select">
                        <div class="dso-label-container">
                            <label for="auto_merk" class="control-label">
                                Type auto
                            </label>
                        </div>
                        <div class="dso-field-container">
                            <select id="auto_merk" class="form-control">
                                <optgroup label="Europees">
                                    <option value="alfa">Alfa Romeo</option>
                                    <option value="fiat">Fiat</option>
                                    <option value="mercedes" selected>Mercedes</option>
                                    <option value="volkswagen">Volkswagen</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>Aanhanger</legend>
                    <fieldset class="form-group dso-radios">
                        <legend class="dso-label-container">
                            <label class="control-label">
                                Welke aanhanger
                            </label>
                        </legend>
                        <div class="dso-field-container">
                            <div class="dso-selectable">
                                <input type="radio" id="aanhanger-0" name="aanhanger" value="bak" />
                                <label for="aanhanger-0">
                                    Bak
                                </label>
                            </div>
                            <div class="dso-selectable">
                                <input type="radio" id="aanhanger-1" name="aanhanger" value="caravan" checked />
                                <label for="aanhanger-1">
                                    Caravan
                                </label>
                            </div>
                            <div class="dso-selectable">
                                <input type="radio" id="aanhanger-2" name="aanhanger" value="fietsendrager" />
                                <label for="aanhanger-2">
                                    Fietsendrager
                                </label>
                            </div>
                            <div class="dso-selectable">
                                <input type="radio" id="aanhanger-3" name="aanhanger" value="oplegger" />
                                <label for="aanhanger-3">
                                    Oplegger
                                </label>
                            </div>
                        </div>
                    </fieldset>
                </fieldset>
                <fieldset>
                    <legend>Vraag</legend>
                    <div class="form-group dso-textarea">
                        <div class="dso-label-container">
                            <label for="gekke_vraag" class="control-label">
                                Waarom heeft een tankstation dat 24 uur per dag open is een slot op de deur?
                            </label>
                        </div>
                        <div class="dso-field-container">
                            <textarea class="form-control" id="gekke_vraag" rows="5"></textarea>
                            <p class="dso-help-block" id="helpTextId_gekke_vraag">Deze vraag heeft een toelichting</p>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>Vraag met infobutton</legend>
                    <fieldset class="form-group dso-radios">
                        <legend class="dso-label-container">
                            <label class="control-label">
                                Blieft u een toelichting?
                            </label>
                            <button type="button" class="btn dso-info-button">
                                <span class="sr-only">
                                    Toelichting
                                </span>
                            </button>
                        </legend>
                        <div class="dso-field-container">
                            <div class="dso-selectable">
                                <input type="radio" id="input-radio-infobutton-0" name="input-radio-infobutton" value="1" checked />
                                <label for="input-radio-infobutton-0">
                                    ja
                                </label>
                                <button type="button" class="btn dso-info-button">
                                    <span class="sr-only">
                                        Toelichting
                                    </span>
                                </button>
                            </div>
                            <div class="dso-selectable">
                                <input type="radio" id="input-radio-infobutton-1" name="input-radio-infobutton" value="2" />
                                <label for="input-radio-infobutton-1">
                                    nee
                                </label>
                            </div>
                        </div>
                    </fieldset>
                </fieldset>
                <fieldset>
                    <legend>Vraag met infobutton uitgeklapt</legend>
                    <fieldset class="form-group dso-radios">
                        <legend class="dso-label-container">
                            <label class="control-label">
                                Toelichting op uw vraag
                            </label>
                            <button type="button" class="btn dso-info-button dso-open">
                                <span class="sr-only">
                                    Toelichting
                                </span>
                            </button>
                        </legend>
                        <div class="dso-field-container">
                            <div class="dso-selectable">
                                <input type="radio" id="input-radio-infobutton-open-0" name="input-radio-infobutton-open" value="1" checked />
                                <label for="input-radio-infobutton-open-0">
                                    ja
                                </label>
                                <button type="button" class="btn dso-info-button">
                                    <span class="sr-only">
                                        Toelichting
                                    </span>
                                </button>
                            </div>
                            <div class="dso-selectable">
                                <input type="radio" id="input-radio-infobutton-open-1" name="input-radio-infobutton-open" value="2" />
                                <label for="input-radio-infobutton-open-1">
                                    nee
                                </label>
                            </div>
                        </div>
                        <div class="dso-info">
                            <button type="button">
                                <span class="sr-only">Sluiten</span>
                            </button>
                            <div class="dso-rich-content">
                                <h4>Let op</h4>
                                <p>Bij verticale formulieren wordt het bij checkboxen en radio's onoverzichtelijk als de toelichting bij de vraag EN opties toont</p>

                            </div>
                        </div>
                    </fieldset>
                </fieldset>
            </fieldset>
            <div class="dso-form-buttons">
                <button type="submit" class="btn btn-primary">
                    Verstuur
                </button>
            </div>
        </form>

    </div>
</body>
<!-- When modal is open add .dso-modal-open to body -->
<body class="dso-modal-open{{#if noMaxHeight }} dso-scripted-height{{/if}}">
  <!-- Modal markup. Can be placed anywhere inside <body> -->
  {{#dialog dialog }}
    <p>{{ body }}</p>
  {{/dialog}}

  <div class="container">
    <!-- Page content -->
    {{render '@form' }}
  </div>
</body>
body: >-
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  parturient montes, nascetur ridiculus mus.
dialog:
  id: modal-close
  heading: Activiteit toevoegen
  buttons:
    - name: confirmButton
      type: submit
      modifier: primary
      label: Toevoegen
    - name: cancelButton
      type: button
      modifier: link
      icon: icon fas fa-times
      label: Annuleren

De class .dso-scripted-height verwijdert op .dso-body in de large viewport de max-height-property.