{{ template "base.html" . }}

{{ define "content" }}
    This is the index page.
{{ end }}

{{/*
{{ define "extrahead" }}
<link rel="stylesheet" type="text/css" href="{{ static "landing.css" }}"/>
<script type="text/javascript" src="{{ static "util.js" }}"></script>
<style type="text/css">
    {{ range _, $col := .RecentPostColumns }}
        {{ range _, $entry := $col }}
            {{ $themeDim := eq .Theme "dark" | ternary (darken .Color 0.5) (brighten .Color 0.2) }}
            {{ $themeDimmer := eq .Theme "dark" | ternary (darken .Color 0.65) (brighten .Color 0.4) }}
            {{ $themeDimmest := eq .Theme "dark" | ternary (darken .Color 0.8) (brighten .Color 0.6) }}

            {{ $linkColor := eq .Theme "dark" | ternary (brighten .Color 0.1) (darken .Color 0.2) }}
            {{ $linkHoverColor := eq .Theme "dark" | ternary (brighten .Color 0.2) (darken .Color 0.1) }}

            {{ eq .Theme "dark" }}
                #p{{ .Project.Subdomain }} .unread a { color: #{% rgb_accent entry.project.color_1 0.55 %}; }
                #p{{ .Project.Subdomain }} .unread a:hover { color: #{% rgb_accent entry.project.color_1 0.65 %}; }
                #p{{ .Project.Subdomain }} .unread .avatar-icon { border: 2px solid #{% rgb_accent entry.project.color_1 0.55 %}; }
                #p{{ .Project.Subdomain }} .thread:nth-of-type(even) { background-color:#{% rgb_accent entry.project.color_1 0.14 False 0.03%}; }
                #p{{ .Project.Subdomain }} .forum .post:nth-of-type(even) { background-color:#{% rgb_accent entry.project.color_1 0.14 False 0.03 %}; }
                #p{{ .Project.Subdomain }} .blog .post:nth-of-type(even) { background-color:#{% rgb_accent entry.project.color_1 0.14 False 0.03 %}; }
            {{ else }}
                #p{{ .Project.Subdomain }} .unread a { color: #{% rgb_accent entry.project.color_1 0.35 %}; }
                #p{{ .Project.Subdomain }} .unread a:hover { color: #{% rgb_accent entry.project.color_1 0.45 %};  }
                #p{{ .Project.Subdomain }} .unread .avatar-icon { border: 2px solid #{% rgb_accent entry.project.color_1 0.35 %}; }
                #p{{ .Project.Subdomain }} .thread:nth-of-type(even) { background-color:#{% rgb_accent entry.project.color_1 0.94 False 0.2 %}; }
                #p{{ .Project.Subdomain }} .forum .post:nth-of-type(even) { background-color:#{% rgb_accent entry.project.color_1 0.94 False 0.2 %}; }
                #p{{ .Project.Subdomain }} .blog .post:nth-of-type(even) { background-color:#{% rgb_accent entry.project.color_1 0.94 False 0.2 %}; }
            {{ end }}
            #p{{ .Project.Subdomain }} .thread.more { background-color:transparent; }
        {{ end }}
    {{ end }}
</style>
<script type="text/javascript" src="{% static 'templates.js' %}?v={% cachebust %}"></script>
<script type="text/javascript" src="{% static 'timeline.js' %}?v={% cachebust %}"></script>
<script type="text/javascript" src="{% static 'showcase.js' %}?v={% cachebust %}"></script>
{{ end }}

{% block columns %}
{% include "showcase/js_templates.html" %}
{% include "timeline/js_templates.html" %}
<div class="content-block pb3">
    <div class="tc tl-l w-100 pb2">
        <h2 class="di-l mr2-l">Community Showcase</h2>
        <ul class="list dib-l">
            <li class="dib-ns ma0 ph2">
                <a href="{% url 'showcase' %}">View all</a>
            </li>
        </ul>
    </div>

    <div class="showcase relative overflow-hidden">
        <div id="showcase-items" class="flex relative pl3 pl0-ns"></div>
        <div class="arrow-container left">
            <a href="javascript:void(0)" class="arrow svgicon svgicon-nofix" onclick="scrollShowcase('left')">{% svg 'chevron-left' %}</a>
        </div>
        <div class="arrow-container right">
            <a href="javascript:void(0)" class="arrow svgicon svgicon-nofix" onclick="scrollShowcase('right')">{% svg 'chevron-right' %}</a>
        </div>
    </div>

    <div class="c--dimmer i pv2 ph3 ph0-ns">
        This is a selection of recent work done by community members. Want to participate? <a href="https://discord.gg/hxWxDee" target="_blank">Join us on Discord.</a>
    </div>
</div>
<script>
    const timelineData = JSON.parse("{{ showcase_timeline_json|escapejs }}");

    const showcaseEl = document.querySelector('#showcase-items');
    for (const item of timelineData.items) {
        const [itemEl, addThumbnail] = makeShowcaseItem(item);
        addThumbnail();
        itemEl.container.classList.add('mr3');
        showcaseEl.appendChild(itemEl.root);
    }

    function rem2px(rem) {
        return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
    }

    function scrollShowcase(direction = null) {
        const ITEM_WIDTH = showcaseEl.querySelector('.showcase-item').getBoundingClientRect().width;
        const ITEM_SPACING = rem2px(1);

        const showcaseWidth = showcaseEl.getBoundingClientRect().width;
        const numVisible = showcaseWidth / (ITEM_WIDTH + ITEM_SPACING);
        const scrollMagnitude = Math.floor(numVisible) - 1;
        const scrollDirection = (direction === 'right' ? 1 : (direction === 'left' ? -1 : 0));
        const scrollAmount = scrollMagnitude * scrollDirection;

        const minIndex = 0;
        const maxIndex = timelineData.items.length - Math.floor(numVisible);

        const currentScrollIndex = parseInt(showcaseEl.getAttribute('data-scroll-index'), 10) || 0;
        const newScrollIndex = Math.max(minIndex, Math.min(maxIndex, currentScrollIndex + scrollAmount));

        showcaseEl.style.transform = `translateX(${-newScrollIndex * (ITEM_WIDTH + ITEM_SPACING)}px)`;
        showcaseEl.setAttribute('data-scroll-index', newScrollIndex);

        const leftArrowEl = document.querySelector('.arrow-container.left');
        const rightArrowEl = document.querySelector('.arrow-container.right');

        leftArrowEl.classList.toggle('hide', newScrollIndex === minIndex);
        rightArrowEl.classList.toggle('hide', newScrollIndex === maxIndex);
    }
    scrollShowcase(); // force a scroll as an easy way to initialize styles

    window.addEventListener('resize', () => scrollShowcase());
</script>

<div class="content-block">
    <div class="optionbar pb2">
        <div class="tc tl-l w-100">
            <h2 class="di-l mr2-l">Around the Network</h2>
            <ul class="list dib-l">
                <li class="dib-ns ma0 ph2">
                    <a href="{% url 'feed' %}">View all posts on HMN</a>
                </li>
                <li class="dib-ns ma0 ph2">
                    <a href="{% url 'podcast' %}">Podcast</a>
                </li>
                <!-- <li class="dib-ns ma0 ph2">
                    <a href="{% url 'streams' %}">See who's live</a>
                </li> -->
                <li class="dib-ns ma0 ph2">
                    <a href="/blogs/p/1138-%5Btutorial%5D_handmade_network_irc" target="_blank">Chat in IRC</a>
                </li>
                <li class="dib-ns ma0 ph2">
                    <a href="https://discord.gg/hxWxDee" target="_blank">Chat on Discord</a>
                </li>
                <li class="dib-ns ma0 ph2">
                    <a href="https://handmadedev.show/" target="_blank">See the Show</a>
                </li>
            </ul>
        </div>
    </div>
</div>
{% spaceless %}
    <div class="content-block news cf">
        {% for col in recent_post_columns %}
            <div class="fl w-100 w-50-l">
                <div class="mw7 mw-none-l center-layout">
                    {% if forloop.counter == 1 %}
                        <div class="pt3">
                            {% include "blog_index_thread_list_entry.html" with post=featured_post align_top=True %}
                        </div>
                    {% endif %}

                    {% for entry in col %}
                        {% with proj=entry.project posts=entry.posts %}
                            <div class="pt3" id="p{{proj.slug}}">
                                <a
                                    href="{% url 'cover_page' subdomain=proj.slug %}"
                                    {% if user|get_theme == 'dark' %}
                                        style="color:#{% rgb_accent proj.color_1 0.55 %};"
                                    {% else %}
                                        style="color:#{% rgb_accent proj.color_1 0.25 %};"
                                    {% endif %}
                                >
                                    <h2 class="ph3">{{ proj.name }}</h2>
                                </a>

                                {% if entry.featured and proj.slug != "hmn" %}
                                    {% with post=entry.featured.0 has_read=entry.featured.1 %} 
                                        {% if post.category.kind == 5 and post.parent == None %}
                                            {% include "thread_list_entry.html" with thread=post.thread %}
                                        {% else %}
                                            {% include "blog_index_thread_list_entry.html" with align_top=True %}
                                        {% endif %}
                                    {% endwith %}
                                {% endif %}

                                {% for post, has_read in posts %}
                                    {% if forloop.counter0 < max_posts %}
                                        {% include "thread_list_entry.html" with thread=post.thread %}
                                    {% endif %}
                                {% endfor %}
                                {% with more=posts|length|add:-5|clamp_lower:0 %}
                                    {% if more > 0 %}
                                        <div class="ph3 thread unread more">
                                            <a class="title" 
                                                href="{% url 'project_forum' subdomain=proj.slug %}"
                                            >{{ more }} more recently &rarr;</a>
                                        </div>
                                    {% endif %}
                                {% endwith %}
                            </div>
                        {% endwith %}
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </div>
{% endspaceless %}
{% endblock %}
*/}}