Website

{{/*  Chat: de chatbox van dex-chatbot (chatbot D-026). Openen, sluiten en de chips met een
      vast antwoord (chatbot D-009) gebeuren volledig in de pagina. Een getypte vraag, een
      startchip zonder antwoord en een vervolgsuggestie gaan als POST naar /chat van de
      chat-service (chatbot D-027, D-050). Logica in static/js/chat.js (setupChat), opmaak
      in static/css/chat.css. Zie D-116.

      Alle teksten komen uit de frontmatter van de sectie. Het endpoint ook: hugo server
      krijgt endpoint_lokaal (de mock), elke andere build endpoint. Zo kan een
      localhost-adres nooit live gaan.

      De chatstart (bot_naam, welkomstberichten, startchips) haalt de build op bij
      <endpoint>/start (chatbot D-048, contract hoofdstuk 12). Alleen bij status "actief"
      komt hij als JSON in data-start. Faalt het ophalen, of is de status iets anders, dan
      een waarschuwing in de build en een chat zonder welkomst en zonder chips; de build
      faalt er nooit op.

      Let op: dit is de testpagina. Op een echte pagina hoort de chatbox fail-closed te
      zijn (chatbot D-028): geen chatbox als de service tijdens de build niet "actief"
      zegt. Hier blijft hij juist staan, zodat je ook de "nog niet verbonden"-toestand
      kunt zien.                                                                       */}}
{{ with $section := .data }}
    {{- $endpoint := cond hugo.IsServer ($section.endpoint_lokaal | default "") ($section.endpoint | default "") | strings.TrimSuffix "/" -}}
    {{- $max := $section.max_tekens | default 250 -}}
    {{- $id := print "chat-" $.index -}}

    {{- $start := dict -}}
    {{- with $endpoint -}}
        {{- $bron := print . "/start" -}}
        {{- $fout := "geen of leeg antwoord, of 404" -}}
        {{- with try (resources.GetRemote $bron) -}}
            {{- with .Err -}}{{- $fout = . -}}{{- else with .Value -}}
                {{- with try (transform.Unmarshal .Content) -}}
                    {{- with .Err -}}{{- $fout = . -}}{{- else with .Value -}}
                        {{- if and (reflect.IsMap .) (eq .status "actief") -}}
                            {{- $start = dict
                                "bot_naam" (.bot_naam | default "")
                                "welkomstberichten" (cond (reflect.IsSlice .welkomstberichten) .welkomstberichten slice)
                                "startchips" (cond (reflect.IsSlice .startchips) (first 5 .startchips) slice)
                            -}}
                        {{- else -}}
                            {{- $fout = "status is niet actief" -}}
                            {{- if reflect.IsMap . -}}{{- $fout = printf "status %v" .status -}}{{- end -}}
                        {{- end -}}
                    {{- end -}}
                {{- end -}}
            {{- end -}}
        {{- end -}}
        {{- if not $start -}}
            {{- warnf "Chatstart niet opgehaald van %s (%v). De chat heeft geen welkomst en geen startchips." $bron $fout -}}
        {{- end -}}
    {{- end -}}

    <section class="chatbot">
        <div class="container">
            <div class="chatbox" data-endpoint="{{ $endpoint }}" data-limit="{{ $max }}" data-teller-vanaf="{{ $section.teller_vanaf | default 200 }}" data-wachttijd="{{ $section.wachttijd | default 30 }}" data-contact="{{ $section.contact_url }}" data-teksten='{{ $section.statussen | jsonify }}' data-start='{{ $start | jsonify }}'>
                <button class="toggle" type="button" aria-expanded="false" aria-controls="{{ $id }}-paneel">
                    <span class="open-label">{{ $section.knop_open }}</span>
                    <span class="close-label">{{ $section.knop_dicht }}</span>
                </button>

                <div class="panel" id="{{ $id }}-paneel">
                    {{/*  De privacyregel is het eerste bericht in het gesprek en scrollt mee. chat.js zet
                          de berichten erachter.  */}}
                    <div class="log" role="log" aria-live="polite" {{ with $start.bot_naam }}aria-label="{{ . }}" {{ end }}data-lenis-prevent>
                        {{ with $section.privacy }}<p class="privacy">{{ .tekst }} <a href="{{ .link_url }}">{{ .link_tekst }}</a></p>{{ end }}
                    </div>

                    <div class="typing" hidden>
                        <span class="visually-hidden">{{ $section.typt }}</span>
                        <span class="dot" aria-hidden="true"></span>
                        <span class="dot" aria-hidden="true"></span>
                        <span class="dot" aria-hidden="true"></span>
                    </div>

                    {{/*  Startchips en vervolgsuggesties: chat.js vult deze rij.  */}}
                    <ul class="chips" hidden data-lenis-prevent></ul>

                    <p class="notice" role="status"></p>

                    {{/*  Het veld staat uit tot chat.js weet dat de service actief is (/health).  */}}
                    <form>
                        <label class="visually-hidden" for="{{ $id }}-vraag">{{ $section.invoer_label }}</label>
                        <textarea id="{{ $id }}-vraag" name="vraag" rows="2" placeholder="{{ $section.invoer_hint }}" aria-describedby="{{ $id }}-teller" disabled></textarea>
                        <div class="actions">
                            <p class="counter" id="{{ $id }}-teller" hidden><span class="count">0</span>/{{ $max }} <span class="visually-hidden">{{ $section.teller_label }}</span></p>
                            <button class="send" type="submit" disabled>{{ $section.verstuur }}</button>
                        </div>
                    </form>

                    <p class="foot">
                        {{ with $section.ai_melding }}<span class="ai-melding">{{ . }}</span>{{ end }}
                        {{ with $section.powered_by }}<span class="powered-by">{{ .tekst }} <a href="{{ .link_url }}">{{ .link_tekst }}</a></span>{{ end }}
                    </p>
                </div>
            </div>
        </div>
    </section>


    <script defer type="text/javascript" src="/js/chat.js"></script>
    <link rel="stylesheet" href="/css/chat.css">

{{ end }}


{{ with $section := .data }}
    <section class="feature-browser">
        <div class="container">
            <div class="browser">
                <span></span>
                {{ with .tag }}<p class="has-tags"><span>{{ . }}</span></p>{{ end }}
                {{ with .inners }}
                    <div class="inners">
                        {{ range . }}
                            {{ $naam := ._type | urlize }}
                            {{ if templates.Exists (print "_partials/bento/" $naam ".html") }}
                                <div class="inner" data-widget="{{ $naam }}" data-cursor='You'>
                                    {{ partial (print "bento/" $naam) . }}
                                    {{ with .cursors }}{{ partial "cursors" . }}{{ end }}
                                </div>
                            {{ else }}
                                {{ warnf "Feature Browser: widget '%s' bestaat niet. Kopieer deze bestandsnaam: %s" ._type $naam }}
                            {{ end }}
                        {{ end }}
                    </div>
                {{ end }}
                {{ with .features }}
                    <ul class="features activate-children">
                        {{ range . }}
                            <li>
                                <p class="title">{{ with .icon }}{{ partial "svg" (. | urlize) }}{{ end }}{{ .title }}</p>
                                <div class="prose">{{ partial "description" . }}</div>
                            </li>
                        {{ end }}
                    </ul>
                {{ end }}
            </div>
        </div>
    </section>
{{ end }}


{{ with $section := .data }}
    <section class="who">
        <div class="container">
            <article class='activate-children'>
                {{- if $.firstSection -}}
                    {{ with .title }}<h1 class='kicker'>{{ . | markdownify }}</h1>{{ end }}
                {{- else -}}
                    {{ with .title }}<h2 class='kicker'>{{ . | markdownify }}</h2>{{ end }}
                {{- end -}}
                {{ range $i, $j := .items }}
                    <div {{ if eq $i 0 }} class='active' {{ end }} >
                        <div class="title-box" data-triggers='.2:done'>
                            {{ partial "sub-h1" (dict "title" .title "firstSection" $.firstSection) }}
                        </div>
                        <div class="prose">{{ partial "description" . }}</div>
                    </div>
                {{ end }}
            </article>
            {{ with .figure }}
                <figure class='browser'>
                    <span></span>
                    {{ with .tags }}<p class="has-tags">{{ range . }} <span>{{ . }}</span>{{ end }}</p>{{ end }}

                    {{ partial "media" (dict "media" .media "fit" true) }}
                </figure>
            {{ end }}
        </div> 
    </section>
{{ end }}

{{ with $section := .data }}
    <section class="intro{{ if .has_faded_dex_background }} has-glow{{ end }}">
        <div class="container {{ if not .has_faded_dex_background }} activate-children {{ end }}">
            {{ if .has_faded_dex_background }}<span class='dex activate' aria-hidden='true'>{{ partial "image" (dict "path" "/img/dex-blurred.png" "size" "525x500" "fit" true "sizes" "(min-width: 768px) 70rem, 216vw" "lazy" false "non_drag" true) }}</span>{{ end }}
            {{ partial "h1-huge" $ }}
            <div class="prose"> 
                {{ partial "description" . }}
            </div>
            {{ partial "btn" . }}
            {{ partial "cursors" .cursors }}
        </div> 
    </section>
{{ end }}


{{ with $section := .data }}
    {{ with where (partial "vacancies-articles" $.page) "Permalink" "!=" $.page.Permalink }}
        <section class="other-vacancies">
            <div class="container">
                <div class="top">
                    {{ partial "h1" $ }}
                    {{ partial "btn" $section }}
                </div>
                <ul class="vacancy-list">
                    {{ range . }}{{ partial "vacancy-card" . }}{{ end }}
                </ul>
            </div>
        </section>
    {{ end }}
{{ end }}


{{ with $section := .data }}
    {{ $p := $.page }}
    {{ $koppen := slice }}
    {{ range $p.Fragments.Headings }}{{ range .Headings }}{{ if eq .Level 2 }}{{ $koppen = $koppen | append . }}{{ end }}{{ end }}{{ end }}
    <section class="blog-content detail-content">
        <div class="container">
            <article class="prose">
                {{ with $p.Params.details.description }}<div class="intro">{{ . | markdownify }}</div>{{ end }}
                {{ $p.Content }}
                {{ with $p.Params.details.key_takeaways }}
                    <div class="takeaways">
                        <h2 class="h5">{{ T "De belangrijkste punten" }}</h2>
                        <ul>{{ range . }}<li>{{ . | markdownify }}</li>{{ end }}</ul>
                    </div>
                {{ end }}
            </article>
            <aside class='slow-sticky'>
                {{ with $koppen }}
                    <nav class="browser toc" aria-label="{{ T "In dit artikel" }}">
                        <span></span>
                        <p class="has-tags"><span>{{ T "In dit artikel" }}</span></p>
                        <ol>{{ range . }}<li><a href="#{{ .ID }}">{{ .Title | plainify }}</a></li>{{ end }}</ol>
                    </nav>
                {{ end }}
            </aside>
        </div>
    </section>
{{ end }}