{{ define "main" }}
  {{ $featured := .Page.Params.featured }}
  {{ $notPlainPage := ne .Page.Params.plain true }}
  <main id="main" class="main">
      <section>
        <article class="article">
          {{ if $notPlainPage }}
          <div class="{{ if $featured }} featured-header {{ else }} article-header {{ end }}">
            <div class="category component">
              <div class="component-content">
                <div class="category-eyebrow">
                  <span class="category-eyebrow__category category_original">
                    {{ if .Page.Params.tags }}
                      {{ range first 1 .Page.Params.tags }}
                        {{.}}
                      {{ end }}
                    {{ end }}
                  </span>
                  <span class="category-eyebrow__date">{{ .Page.Params.Date | time.Format ":date_long"}}</span>
                </div>
              </div>
            </div>
            <div class="pagetitle component">
              <div class="component-content">
                <h1 class="hero-headline">{{ .Title }}</h1>
              </div>
            </div>
            <div class="component {{ if $featured }} featured-subhead {{ else }} article-subhead {{ end }}">
              <div class="component-content">{{ .Page.Params.description }}</div>
            </div>

            <div class="tagssheet component">
              <div class="component-content">
                {{ range .Page.Params.tags}}
                  {{ $url := printf "%s%s" "tags/" .  }}
                  <a href="{{ $url | urlize | relURL }}" class="tag">
                    {{ . }}
                  </a>
                {{ end }}
              </div>
            </div>
          </div>
          {{ else }}
          <div class="article-header">
            <div class="pagetitle component">
              <div class="component-content">
                <h1 class="hero-headline">{{ .Title }}</h1>
              </div>
            </div>
          </div>
          {{ end }}
          <div class="pagebody">
            <!-- TODO: hugo render hooks do not support custom markdown so here replace element manually -->
            {{ $content := .Content | replaceRE "<p>" "<p class=\"component-content component\">" }}
            {{ $content = $content | replaceRE "<table>" "<div class=\"component-content component\"><table>" }}
            {{ $content = $content | replaceRE "</table>" "</table></div>" }}
            {{ $content = $content | replaceRE "<ol>" "<div class=\"component-content component\"><ol>" }}
            {{ $content = $content | replaceRE "</ol>" "</ol></div>" }}
            {{ $content = $content | replaceRE "<ul>" "<div class=\"component-content component\"><ul>" }}
            {{ $content = $content | replaceRE "</ul>" "</ul></div>" }}
            {{ $content |  safeHTML}}
          </div>
          {{- if and $notPlainPage site.Params.ShowCopyRight -}}
          <div class="component">
            <div class="component-content">
              <div class="article-copyright">
                <p class="content">
                  {{ i18n "copyright" }}: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed" target="_blank">{{ i18n "licenses" }}</a>
                </p>
                <p class="content">{{ i18n "author"}}:  {{ .Page.Params.author }} </p>
                <p class="content">{{ i18n "postDate"}}:  {{ .Page.Params.Date | time.Format ":date_long" }}</p>
              </div>
            </div>
          </div>
          {{- end -}}
        </article>
      </section>
  </main>

  <script>
    var script = document.createElement("script");
    {{- $js := resources.Get "js/initPost.js" -}}
    {{- $opts := dict 
      "params" (dict "baseURL" site.BaseURL) 
    -}}
    {{- $js = $js | js.Build $opts -}}
    script.src = {{ $js.Permalink }};
    document.head.appendChild(script);
  </script>
{{ end }}