Aanvragen File Upload

There are no notes for this item.

<header>
    <div class="dso-logo-bar">
        <img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo" />
        <div class="dso-tools-bar">
            <div class="dso-login">
                <a href="" class="btn btn-link">
                    <dso-icon icon="user"></dso-icon><span>Inloggen</span>
                </a>
            </div>
        </div>
    </div>
    <nav class="dso-navbar">

        <div class="dso-navbar-header">
            <button type="button" class="dso-navbar-toggle btn btn-default">
                <dso-icon icon="bars"></dso-icon>
                <span class="sr-only">Ga naar menu</span>
            </button>
        </div>

        <ul class="dso-nav dso-nav-main">
            <li>
                <a href="#">
                    Home
                </a>
            </li>
            <li>
                <a href="#">
                    Vergunningcheck
                </a>
            </li>
            <li>
                <a href="#">
                    Aanvragen
                </a>
            </li>
            <li class="dso-active">
                <a href="#">
                    Regels op de kaart
                </a>
            </li>
            <li>
                <a href="#">
                    Mijn Omgevingsloket
                </a>
            </li>
        </ul>
    </nav>
    <nav aria-label="U bevindt zich hier:">
        <ol class="breadcrumb" itemscope itemtype="//schema.org/BreadcrumbList">
            <li itemscope="" itemprop="itemListElement" itemtype="//schema.org/ListItem">
                <a itemprop="item" href="#">
                    <span itemprop="name">Home</span>
                </a>
                <meta itemprop="position" content="1" />
            </li>
            <li class="active" aria-current="page" itemscope="" itemprop="itemListElement" itemtype="//schema.org/ListItem">
                <span itemprop="name">Checken</span>
                <meta itemprop="position" content="2" />
            </li>
        </ol>
    </nav>
</header>

<main>
    <form class="form-horizontal">
        <div class="clearfix">
            <h1>Object Laan van Eik en Duinen 125, Den Haag</h1>
            <h2 class="dso-steps-indicator">
                5. Documenten

                <span class="dso-step">
                    Stap 5 van 7
                </span>
            </h2>

        </div>
        <div class="dso-accordion">
            <div class="dso-accordion-section dso-open dso-nested-accordion">
                <h3 class="dso-section-handle"><button type="button" aria-expanded="true">Veehouderij

                    </button>
                </h3>
                <div class="dso-section-body">

                    <div class="dso-accordion">
                        <div class="dso-accordion-section dso-open">
                            <div class="dso-section-handle">
                                <button type="button" aria-expanded="true">
                                    Beschrijving installatie en activiteiten

                                </button>
                            </div>

                            <div class="dso-section-body">

                                <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" id="documenten-file-filename-0">
                                                Schetsen_en_foto&#39;s_1.pdf
                                            </div>
                                            <div class="dso-confidential dso-selectable">
                                                <input type="checkbox" id="documenten-input-confirm-0" name="" value="" aria-describedby="documenten-file-filename-0" />
                                                <label for="documenten-input-confirm-0">
                                                    Vertrouwelijk
                                                </label>
                                            </div>

                                            <button type="button" aria-describedby="documenten-file-filename-0" class="btn btn-link dso-remove"><span>Verwijder document</span></button>
                                        </li>

                                        <li>
                                            <div class="dso-filename" id="documenten-file-filename-1">
                                                Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
                                            </div>
                                            <div class="dso-confidential dso-selectable">
                                                <input type="checkbox" id="documenten-input-confirm-1" name="" value="" checked aria-describedby="documenten-file-filename-1" />
                                                <label for="documenten-input-confirm-1">
                                                    Vertrouwelijk
                                                </label>
                                            </div>

                                            <dso-icon icon="status-warning"></dso-icon>

                                            <button type="button" aria-describedby="documenten-file-filename-1" class="btn btn-link dso-remove"><span>Verwijder document</span></button>
                                        </li>

                                    </ul>

                                    <dso-alert status="warning">
                                        <div class="dso-rich-content">
                                            <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>
                                    </dso-alert>

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

                                    <!-- Or to trigger the upload using a button element (not recommended) -->
                                    <!--
    <button type="button"
  class="btn btn-link"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
                                </div>

                                <div class="dso-form-buttons">

                                    <button type="button" class="btn btn-primary"><span>Volgende</span></button>

                                </div>

                            </div>

                        </div>
                    </div>

                </div>
            </div>
            <div class="dso-accordion-section">
                <h3 class="dso-section-handle"><button type="button" aria-expanded="false">Beschrijving grondstoffen en hulpstoffen

                    </button>
                </h3>
            </div>
            <div class="dso-accordion-section">
                <h3 class="dso-section-handle"><button type="button" aria-expanded="false">Energiegebruik en maatregelen

                    </button>
                </h3>
            </div>
            <div class="dso-accordion-section">
                <h3 class="dso-section-handle"><button type="button" aria-expanded="false">Emissies, maatregelen en technieken

                    </button>
                </h3>
            </div>
            <div class="dso-accordion-section">
                <h3 class="dso-section-handle"><button type="button" aria-expanded="false">Beschrijving toestand van de lokatie

                    </button>
                </h3>
            </div>
            <div class="dso-accordion-section">
                <h3 class="dso-section-handle"><button type="button" aria-expanded="false">Afvalstoffen

                    </button>
                </h3>
            </div>
        </div>

    </form>
</main>

<footer>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <h2>Service</h2>
            <ul>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Sitemap</a></li>
                <li><a href="#">Help</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Over deze site</h2>
            <ul>
                <li><a href="#">Copyright</a></li>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Cookies</a></li>
                <li><a href="#">Toegankelijkheid</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Volg ons ook op</h2>
            <ul>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">LinkedIn</a></li>
            </ul>
        </div>
    </div>
</footer>
{% render '@header' %}

<main>
  <form class="form-horizontal">
    <div class="clearfix">
      <h1>Object Laan van Eik en Duinen 125, Den Haag</h1>
      {% render '@form-steps', {title: steps.title, step: steps.step} %}
    </div>
    {% render '@accordion', accordion %}
  </form>
</main>

{% render '@footer' %}
steps:
  title: 5. Documenten
  step: Stap 5 van 7
accordion:
  sections:
    - title: Veehouderij
      id: panel1
      open: true
      sections:
        - title: Beschrijving installatie en activiteiten
          id: panel1
          open: true
          fieldsets:
            - groups:
                - id: documenten
                  inputType: files
                  description: >-
                    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).
                  files:
                    - filename: Schetsen_en_foto's_1.pdf
                    - filename: Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
                      confidential: true
          buttons:
            - type: button
              modifier: primary
              label: Volgende
    - title: Beschrijving grondstoffen en hulpstoffen
      id: panel2
    - title: Energiegebruik en maatregelen
      id: panel3
    - title: 'Emissies, maatregelen en technieken'
      id: panel4
    - title: Beschrijving toestand van de lokatie
      id: panel5
    - title: Afvalstoffen
      id: panel6