{{ define "main" }}
  <div id="main-content" class="blog flex-grow-1">
    <div class="section">
      <div
        class="row {{ if or (eq .Site.Params.blog.layout "sidebar") (eq .Site.Params.blog.layout "sidebar-right") }}
          has-sidebar
        {{ end }}">
        {{ if eq .Site.Params.blog.layout "sidebar" }}
          <div
            class="col-sidebar"
            style="width: {{ .Site.Params.blog.sidebarWidth }}%">
            {{ partial "blog-sidebar.html" . }}
          </div>
        {{ end }}


        <div
          class="col-content {{ if ne .Site.Params.blog.narrowContent false }}narrow-content{{ end }}"
          {{ if or (eq .Site.Params.blog.layout "sidebar") (eq .Site.Params.blog.layout "sidebar-right") }}
            style="width: calc(100% - {{ .Site.Params.blog.sidebarWidth }}%)"
          {{ end }}>
          <h1 class="rad-fade-down rad-waiting rad-animate">{{ .Title }}</h1>
          {{ .Content }}

          <!-- Main Featured Post - Full Width Design -->
          <div class="featured-post-container">
            {{ $featuredPosts := where .Pages ".Params.featured" true }}
            {{ if isset .Site.Params "blog" }}
              {{ if isset .Site.Params.blog "featured_sort_by_weight" }}
                {{ if .Site.Params.blog.featured_sort_by_weight }}
                  {{ $featuredPosts = sort $featuredPosts "Weight" }}
                {{ end }}
              {{ else }}
                {{ $featuredPosts = sort $featuredPosts "Date" "desc" }}
              {{ end }}
            {{ else }}
              {{ $featuredPosts = sort $featuredPosts "Date" "desc" }}
            {{ end }}
            {{ $mainFeaturedPost := first 1 $featuredPosts }}
            {{ if $mainFeaturedPost }}
              {{ range $mainFeaturedPost }}
                <div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
                  <div class="row align-items-center">
                    <div class="col-lg-8 px-0">
                      <h2 class="display-4 fst-italic">
                        {{ .Title }}
                      </h2>
                        <div class="lead my-3">
                        {{ .Summary | plainify | safeHTML }}
                        </div>
                      <p class="lead mb-0">
                        <a href="{{ .RelPermalink }}" class="text-body-emphasis fw-bold">
                          Continue reading...
                        </a>
                      </p>
                    </div>
                    {{ if isset .Params "images" }}
                      {{ with .Params.images }}
                        {{ if isset . "featured_image" }}
                          <div class="col-lg-4 d-flex justify-content-center align-items-center mt-4 mt-lg-0">
                            <img src="{{ .featured_image }}" alt="{{ $.Title }}" class="featured-thumbnail img-fluid rounded">
                          </div>
                        {{ end }}
                      {{ end }}
                    {{ end }}
                  </div>
                </div>
              {{ end }}
            {{ else }}
              <!-- no featured post is found -->
            {{ end }}
          </div>

          <div class="row mb-2">
            <!-- Secondary featured posts (2-3rd featured posts) -->
            {{ $secondaryFeaturedPosts := after 1 $featuredPosts | first 2 }}
            
            {{ if $secondaryFeaturedPosts }}
              {{ range $secondaryFeaturedPosts }}
                <div class="col-md-6">
                  <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                    <div class="col p-4 d-flex flex-column position-static">
                      {{ with .GetTerms "topics" }}
                        {{ range first 1 . }}
                          <strong class="d-inline-block mb-2 text-primary-emphasis">
                            {{ .LinkTitle }}
                          </strong>
                        {{ end }}
                      {{ end }}
                      <h3 class="mb-0">{{ .Title }}</h3>
                      <div class="mb-1 text-body-secondary">{{ .Date.Format "Jan 2, 2006" }}</div>
                      <div class="card-text mb-auto">
                        {{ .Summary | plainify | truncate 120 }}
                      </div>
                      <a href="{{ .RelPermalink }}" class="icon-link gap-1 icon-link-hover stretched-link">
                        Continue reading
                        <svg class="bi" aria-hidden="true" width="16" height="16" focusable="false">
                          <use xlink:href="#chevron-right"></use>
                        </svg>
                      </a>
                    </div>
                    <div class="col-auto d-none d-lg-block">
                      {{ if isset .Params "images" }}
                        {{ with .Params.images }}
                          {{ if isset . "featured_image" }}
                            <img src="{{ .featured_image }}" width="200" height="250" alt="{{ $.Title }}" class="secondary-featured-img">
                          {{ else }}
                            <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" 
                                role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"
                                focusable="false">
                              <title>Placeholder</title>
                              <rect width="100%" height="100%" fill="#55595c"></rect>
                              <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
                            </svg>
                          {{ end }}
                        {{ end }}
                      {{ else }}
                        <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" 
                            role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"
                            focusable="false">
                          <title>Placeholder</title>
                          <rect width="100%" height="100%" fill="#55595c"></rect>
                          <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
                        </svg>
                      {{ end }}
                    </div>
                  </div>
                </div>
              {{ end }}
              
            
            {{ end }}
          </div>

          <div class="posts-list">
            {{ $allPosts := .Pages }}
            {{ $nonFeaturedPosts := where $allPosts ".Params.featured" "!=" true }}
            {{ range $nonFeaturedPosts }}
              <div
                class="row row--padded rad-animation-group rad-fade-down rad-waiting rad-animate section--border-bottom">
                {{ .Render "summary" }}
              </div>
            {{ end }}
          </div>
        </div>
        
        {{ if eq .Site.Params.blog.layout "sidebar-right" }}
          <div
            class="col-sidebar"
            style="width: {{ .Site.Params.blog.sidebarWidth }}%">
            {{ partial "blog-sidebar.html" . }}
          </div>
        {{ end }}
      </div>
    </div>
  </div>
{{ end }}