{% set _view_mode = view_mode or config.view_mode or 'cards' %}
{% set view_styles = ['/css/home.css', '/css/blog.css', '/css/code.css'] if _view_mode == 'full' else ['/css/home.css'] %}
{% set _page_title = folder_title or title or config.title or 'Blog' %}
{% set _page_description = folder_description or description or config.description %}
{% set _page_url = (config.link ~ '/~' ~ current_folder ~ '/') if current_folder else config.link %}
{% with view_mode=_view_mode, title=_page_title, url=_page_url, description=_page_description, type='index', image=None, skip_header=not config.header, styles=view_styles %}
  {% include 'common-head.html' %}
{% endwith %}

{% set view_mode = _view_mode %}

<main>
  <div class="index view-{{ view_mode }}">

    {% if breadcrumbs %}
    <nav class="breadcrumbs" aria-label="Breadcrumb">
      {% for crumb in breadcrumbs %}
        {% if not loop.last %}
          <a href="{{ crumb.uri }}">{{ crumb.title }}</a>
          <span class="separator">›</span>
        {% else %}
          <span class="current">{{ crumb.title }}</span>
        {% endif %}
      {% endfor %}

      {% if feed_url %}
      <div class="feed-header">
        <a href="{{ feed_url }}" class="feed-link" target="_blank" rel="noopener">
          {% include "icons/rss.html" %}
        </a>
      </div>
      {% endif %}
    </nav>
    {% endif %}

    {% if folders %}
    <details class="folders-section" open>
      <summary class="folders-toggle">
        <span class="folders-toggle-icon">📁</span>
        <span class="folders-toggle-text">Folders</span>
        <span class="folders-toggle-count">({{ folders|length }})</span>
      </summary>
      <div class="folders-grid">
        {% for folder in folders %}
          <a class="folder-card" href="{{ folder.uri }}">
            <div class="folder-icon">📁</div>
            <div class="folder-info">
              <div class="folder-title">{{ folder.title }}</div>
              {% if folder.description %}
              <div class="folder-description">{{ folder.description }}</div>
              {% endif %}
            </div>
          </a>
        {% endfor %}
      </div>
    </details>
    {% endif %}

    {% if external_feeds %}
    <details class="folders-section feeds-section" open>
      <summary class="folders-toggle">
        <span class="folders-toggle-icon">{% include "icons/rss.html" %}</span>
        <span class="folders-toggle-text">Feeds</span>
        <span class="folders-toggle-count">({{ external_feeds|length }})</span>
      </summary>
      <div class="folders-grid">
        {% for feed in external_feeds %}
          <a class="folder-card folder-external" href="{{ feed.uri }}">
            <div class="folder-icon">{% if feed.image %}<img src="{{ feed.image }}" alt="" class="folder-logo">{% else %}{% include "icons/rss.html" %}{% endif %}</div>
            <div class="folder-info">
              <div class="folder-title">{{ feed.title }}</div>
              {% if feed.description %}
              <div class="folder-description">{{ feed.description }}</div>
              {% endif %}
              {% if feed.entry_count %}
              <div class="folder-count">{{ feed.entry_count }} articles</div>
              {% endif %}
            </div>
          </a>
        {% endfor %}
      </div>
    </details>
    {% endif %}

    {% if pages %}
    <div class="articles-section">
      <div class="articles">
    {% endif %}

    {% for i, page in pages %}

      {% if view_mode == 'list' %}

          <a class="article article-list" href="{{ page['uri'] }}">
            <div class="container">
              <div class="title">
                {{ page['title'] }}
              </div>

              {% if page['published'] %}
                <div class="published-date">
                  {{ page['published'].strftime('%b %d, %Y') }}
                </div>
              {% endif %}

              {% if page['description'] %}
                <div class="description">
                  {{ page['description'] }}
                </div>
              {% endif %}

              {% if page['source'] %}
                <div class="source">
                  <span class="source-logo">
                    {% if page['source_logo'] %}
                      <img class="source-logo" src="{{ page['source_logo'] }}" alt="">
                    {% else %}
                      &#128279;
                    {% endif %}
                  </span>
                  <span class="source-name">
                    {{ page['source'] }}
                  </span>
                </div>
              {% endif %}
            </div>
          </a>

      {% elif view_mode == 'full' %}

          <article class="article article-full">
            <a class="article-full-header" href="{{ page['uri'] }}">
              <div class="title">
                {{ page['title'] }}
              </div>

              {% if page['published'] %}
                <div class="published-date">
                  {{ page['published'].strftime('%b %d, %Y') }}
                </div>
              {% endif %}

              {% if page['image'] %}
                <div class="image">
                  <img src="{{ page['image'] }}" alt="">
                </div>
              {% endif %}
            </a>

            {% if page['content'] %}
              <div class="article-content content">
                {{ page['content']|safe }}
              </div>
            {% elif page['description'] %}
              <div class="description">
                {{ page['description'] }}
              </div>
            {% endif %}
          </article>

      {% else %}

          <a class="article" href="{{ page['uri'] }}">
            <div class="container">
              {% if page['image'] %}
                <div class="image">
                  <img src="{{ page['image'] }}" alt="">
                </div>
              {% endif %}

              <div class="title">
                {{ page['title'] }}
              </div>

              {% if page['published'] %}
                <div class="published-date">
                  {{ page['published'].strftime('%b %d, %Y') }}
                </div>
              {% endif %}

              {% if page['description'] %}
                <div class="description">
                  {{ page['description'] }}
                </div>
              {% endif %}

              {% if page['source'] %}
                <div class="source">
                  <span class="source-logo">
                    {% if page['source_logo'] %}
                      <img class="source-logo" src="{{ page['source_logo'] }}" alt="">
                    {% else %}
                      &#128279;
                    {% endif %}
                  </span>
                  <span class="source-name">
                    {{ page['source'] }}
                  </span>
                </div>
              {% endif %}
            </div>
          </a>

      {% endif %}

    {% endfor %}

    {% if pages %}
      </div>
    </div>
    {% endif %}

  </div>

</main>

{% include 'footer.html' %}
{% include 'common-tail.html' %}