{{ define "main" }}
<article class="card-container">
    <header><h1>{{ .Title }}</h1></header>
  <div class="content-wrapper">
        {{ if .Params.categories }}
    <p>{{ .Date.Format "2006-01-02" }}</p>
    <div class="tag-list">
            <strong>Categories:</strong>
            {{ range .Params.categories }}
      <a href="{{ "/categories/" | relLangURL }}{{ . | urlize }}" class="tag-link">{{ . }}</a>
            {{ end }}
        </div>
        {{ end }}
        {{ if .Params.tags }}
    <div class="tag-list">
            <strong>Tags:</strong>
            {{ range .Params.tags }}
      <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" class="tag-link">{{ . }}</a>
            {{ end }}
        </div>
        {{ end }}
        <br>
    
    {{ .Content }}
    </div>
</article>

{{ with .Site.Params.isso }}
<div class="comments-container">
    <h3>comments</h3>
    <section id="isso-thread">
        <script data-isso="{{ .url }}"
                data-isso-require-email="false"
                data-isso-require-author="false"
                data-isso-reply-notifications="false"
                data-isso-input-type="textarea"
                src="{{ .url }}js/embed.min.js"></script>
        <script>
        (function() {
            var avatars = [
                '/images/avatars/avatar1.jpg',
                '/images/avatars/avatar2.png',
                '/images/avatars/avatar3.png'
            ];

            function hashName(str) {
                var hash = 0;
                str = (str || 'anonymous').toLowerCase().trim();
                for (var i = 0; i < str.length; i++) {
                    hash = ((hash << 5) - hash) + str.charCodeAt(i);
                    hash |= 0;
                }
                return Math.abs(hash);
            }

            function replaceAvatars() {
                var comments = document.querySelectorAll('#isso-thread .isso-comment');
                comments.forEach(function(comment) {
                    if (comment.dataset.avatarSet) return;
                    var authorEl = comment.querySelector('.isso-author');
                    var avatarEl = comment.querySelector('.isso-avatar, svg');
                    if (avatarEl) {
                        var name = authorEl ? authorEl.textContent : 'anonymous';
                        var idx = hashName(name) % avatars.length;
                        var img = document.createElement('img');
                        img.src = avatars[idx];
                        img.alt = name;
                        img.className = 'isso-custom-avatar';
                        avatarEl.parentNode.replaceChild(img, avatarEl);
                        comment.dataset.avatarSet = '1';
                    }
                });
            }

            // Fix name input placeholder + hide label
            var check = setInterval(function() {
                var nameInput = document.querySelector('#isso-thread .isso-postbox-author input, #isso-thread .isso-input-wrapper:first-of-type input[type="text"]');
                if (nameInput) {
                    nameInput.placeholder = 'Name (optional)';
                    var label = nameInput.closest('.isso-input-wrapper, .isso-postbox-author');
                    if (label) {
                        var labelEl = label.querySelector('label');
                        if (labelEl) labelEl.style.display = 'none';
                    }
                    clearInterval(check);
                }
            }, 100);

            // Watch for new comments and replace avatars
            var observer = new MutationObserver(replaceAvatars);
            var waitForThread = setInterval(function() {
                var thread = document.getElementById('isso-thread');
                if (thread) {
                    observer.observe(thread, { childList: true, subtree: true });
                    replaceAvatars();
                    clearInterval(waitForThread);
                }
            }, 200);
        })();
        </script>
        <noscript>javascript is required to view comments.</noscript>
    </section>
</div>
{{ end }}
{{ end }}