{{ define "main" }}
  {{ $pageTitle := .Title }}
  <div uk-grid>

    <div class="uk-width-1-4@m">
      <div class="uk-padding-small uk-panel-scrollable" uk-height-viewport="offset-bottom: 150px">
        <ul uk-accordion="collapsible: false">
          <li>
            <a class="uk-accordion-title" href>General</a>
            <div class="uk-accordion-content">
              <ul class="uk-list uk-list-collapse uk-text-light uk-text-truncate component-items">
                <li><a href="{{ .Site.Params.staticDocsPath }}/overview.html" target="_blank">Overview</a></li>
                <li><a href="{{ .Site.Params.staticDocsPath }}/getting-started.html" target="_blank">Getting Started</a></li>
                <li><a href="{{ .Site.Params.staticDocsPath }}/user-guide.html" target="_blank">User Guide</a></li>
                <li><a href="{{ .Site.Params.staticDocsPath }}/expression-language-guide.html" target="_blank">Expression Language Guide</a></li>
                <li><a href="{{ .Site.Params.staticDocsPath }}/record-path-guide.html" target="_blank">RecordPath Guide</a></li>
                <li><a href="{{ .Site.Params.staticDocsPath }}/administration-guide.html" target="_blank">Admin Guide</a></li>
                <li><a href="{{ .Site.Params.staticDocsPath }}/toolkit-guide.html" target="_blank">Toolkit Guide</a></li>
                <li><a href="{{ .Site.Params.staticDocsPath }}/walkthroughs.html" target="_blank">Walkthroughs</a></li>
              </ul>
            </div>
          </li>
        </ul>

        <ul uk-accordion="collapsible: false">
          <li>
            <a class="uk-accordion-title" href>Developer</a>
            <div class="uk-accordion-content">
              <ul class="uk-list uk-list-collapse uk-text-light uk-text-truncate component-items">
                <li><a href="{{ .Site.Params.staticDocsPath }}/developer-guide.html">Developer Guide</a></li>
                <li><a href="{{ .Site.Params.staticDocsPath }}/python-developer-guide.html">Python Developer Guide</a></li>
                <li><a href="{{ .Site.Params.staticDocsPath }}/nifi-in-depth.html">Apache NiFi In Depth</a></li>
                <li><a href="{{ .Site.Params.staticDocsPath }}/rest-api.html">REST API</a></li>
              </ul>
            </div>
          </li>
        </ul>

        <ul uk-accordion="collapsible: false">
          <li>
            <a class="uk-accordion-title" href>Processors</a>
            <div class="uk-accordion-content">
              {{ $processors := where .Site.Pages "Params.componentType" "processors" }}
              <ul class="uk-list uk-list-collapse uk-text-light uk-text-truncate component-items">
                {{ range $processors }}
                <li {{ if eq .Title $pageTitle }}class="uk-text-bold" id="component-selected"{{ end }}>
                  <a href="{{ .RelPermalink }}">{{ .Title }}</a>
                </li>
                {{ end }}
              </ul>
            </div>
          </li>
        </ul>

        <ul uk-accordion="collapsible: false">
          <li>
            <a class="uk-accordion-title" href>Controller Services</a>
            <div class="uk-accordion-content">
              {{ $controllerServices := where .Site.Pages "Params.componentType" "controller-services" }}
              <ul class="uk-list uk-list-collapse uk-text-light uk-text-truncate component-items">
                {{ range $controllerServices }}
                <li {{ if eq .Title $pageTitle }}class="uk-text-bold" id="component-selected"{{ end }}>
                  <a href="{{ .RelPermalink }}">{{ .Title }}</a>
                </li>
                {{ end }}
              </ul>
            </div>
          </li>
        </ul>

        <ul uk-accordion="collapsible: false">
          <li>
            <a class="uk-accordion-title" href>Reporting Tasks</a>
            <div class="uk-accordion-content">
              {{ $reportingTasks := where .Site.Pages "Params.componentType" "reporting-tasks" }}
              <ul class="uk-list uk-list-collapse uk-text-light uk-text-truncate component-items">
                {{ range $reportingTasks }}
                <li {{ if eq .Title $pageTitle }}class="uk-text-bold" id="component-selected"{{ end }}>
                  <a href="{{ .RelPermalink }}">{{ .Title }}</a>
                </li>
                {{ end }}
              </ul>
            </div>
          </li>
        </ul>

        <ul uk-accordion="collapsible: false">
          <li>
            <a class="uk-accordion-title" href>Parameter Providers</a>
            <div class="uk-accordion-content">
              {{ $parameterProviders := where .Site.Pages "Params.componentType" "parameter-providers" }}
              <ul class="uk-list uk-list-collapse uk-text-light uk-text-truncate component-items">
                {{ range $parameterProviders }}
                <li {{ if eq .Title $pageTitle }}class="uk-text-bold" id="component-selected"{{ end }}>
                  <a href="{{ .RelPermalink }}">{{ .Title }}</a>
                </li>
                {{ end }}
              </ul>
            </div>
          </li>
        </ul>

        <ul uk-accordion="collapsible: false">
          <li>
            <a class="uk-accordion-title" href>Flow Analysis Rules</a>
            <div class="uk-accordion-content">
              {{ $flowAnalysisRules := where .Site.Pages "Params.componentType" "flow-analysis-rules" }}
              <ul class="uk-list uk-list-collapse uk-text-light uk-text-truncate component-items">
                {{ range $flowAnalysisRules }}
                <li {{ if eq .Title $pageTitle }}class="uk-text-bold" id="component-selected"{{ end }}>
                  <a href="{{ .RelPermalink }}">{{ .Title }}</a>
                </li>
                {{ end }}
              </ul>
            </div>
          </li>
        </ul>
      </div>

      <script type="text/javascript">
        var componentSelected = document.getElementById('component-selected');
        if (componentSelected) {
            componentSelected.scrollIntoView();
        }
      </script>
    </div>

    <div id="component-panel" class="uk-width-3-4@m">
      <div class="uk-padding-small uk-panel-scrollable" uk-height-viewport="offset-bottom: 150px">
        {{ if .Params.artifact }}
          {{ partial "component.html" . }}
        {{ else }}
        <h3>Overview</h3>
        <p>
          Apache NiFi is a dataflow system based on the concepts of flow-based programming. It supports powerful and scalable directed graphs of data routing, transformation, and system mediation
          logic. NiFi has a web-based user interface for design, control, feedback, and monitoring of dataflows. It is highly configurable along several dimensions of quality of service, such as
          loss-tolerant versus guaranteed delivery, low latency versus high throughput, and priority-based queuing. NiFi provides fine-grained data provenance for all data received, forked, joined
          cloned, modified, sent, and ultimately dropped upon reaching its configured end-state.
        </p>
        {{ end }}
      </div>
    </div>
  </div>
{{ end }}