{{ define "main" }}
    <header>
        <h2>{{ .Title }}</h2>
        <p>{{ .Description }}</p>

        {{- with .GetTerms "author" }}
            {{- range . -}}
            <div class="author">
                di <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
            </div>
            {{- end }}
        {{- end }}

        {{ if .Site.Params.show_post_dates | default true }}
            {{- with .Date }}<time>{{ . | time.Format ":date_medium" }}</time>{{ end }}
        {{ end }}
        {{- with .Params.location_link -}}
        <div class="location">{{ T "location" }}: {{ . | markdownify }}</div>
        {{ end }}
        {{- with .Params.license -}}
        <div class="license">{{ T "license" }}: {{ . | markdownify }}</div>
        {{ end }}
        {{ partial "tags.html" . }}
    </header>

    {{- $image_src := "" }}
    {{- $image_alt := "" }}
    {{- $image_caption := "" }}

    {{/* priorità maggiore: image_post */}}
    {{- if .Params.image_post }}
        {{- $image_src = .Params.image_post.src }}
        {{- with .Params.image_post.alt }}
            {{- $image_alt = . }}
        {{-  end }}
        {{- with .Params.image_post.caption }}
            {{- $image_caption = . }}
        {{-  end }}
    {{-  end }}
    
    {{/* in alternativa uso il metodo vecchio */}}
    {{- if and (not $image_src) .Params.image }}
        {{- $image_src = .Params.image }}
        {{- with .Params.image_alt }}
            {{- $image_alt = . }}
        {{-  end }}
        {{- with .Params.image_caption }}
            {{- $image_caption = . }}
        {{-  end }}
    {{-  end }}

    {{- if $image_src }}
        {{- $image := .Page.Resources.GetMatch $image_src }}
        {{- $maxHeight := 600 -}}
        {{- $ratio := 2.33 -}}

        <span class="image featured"><figure>
        {{- if gt $image.Height $maxHeight -}}
            {{- $image = $image.Resize (printf "x%d webp q50" $maxHeight) -}}
        {{- end -}}
        <img src="{{ $image.RelPermalink }}" alt="{{ $image_alt }}" {{- if ge (mul $image.Height $ratio) $image.Width -}}style="width: auto;" {{- end -}}/>
        {{- with $image_caption -}} 
        <figcaption style="max-width: {{- $image.Width -}}px;">{{- . | markdownify -}}</figcaption>
        {{- end -}}
        </figure></span>
    {{ end }}

    {{- .Content }}

    {{ if (findRE "<pre" .Content 1) }}
    <script>
        function addCopyButtons(clipboard) {
            document.querySelectorAll('pre > code').forEach(function (codeBlock) {
                var button = document.createElement('button');
                button.className = 'copy-code-button';
                button.type = 'button';
                button.innerText = 'Copy';
        
                button.addEventListener('click', function () {
                    clipboard.writeText(codeBlock.innerText).then(function () {
                        /* Chrome doesn't seem to blur automatically,
                           leaving the button in a focused state. */
                        button.blur();  
        
                        button.innerText = 'Copied!';
        
                        setTimeout(function () {
                            button.innerText = 'Copy';
                        }, 2000);
                    }, function (error) {
                        button.innerText = 'Error';
                    });
                });
        
                var pre = codeBlock.parentNode;
                if (pre.parentNode.classList.contains('highlight')) {
                    var highlight = pre.parentNode;
                    highlight.parentNode.insertBefore(button, highlight);
                } else {
                    pre.parentNode.insertBefore(button, pre);
                }
            });
        }
        
        if (navigator && navigator.clipboard) {
            addCopyButtons(navigator.clipboard);
        }
    </script>
    {{ end }}

{{ end }}