{{ define "main" }}

{{ $truncate := default true .Site.Params.truncate }}

<div class="container my-5 flex-grow-1">
    <div class="row justify-content-evenly">
        <div class="col-12 col-lg-3">
            {{ partial "focus.html" . }}
        </div>
        <div class="col-12 col-lg-6">
            {{ partial "news-main.html" . }}
        </div>
        <div class="col-12 col-lg-3 mt-5 pt-5 mt-lg-0 pt-lg-0">
            {{ partial "news-featured.html" . }}
        </div>
    </div>

    {{ partial "news-tab.html" . }}

    <div class="row mt-5 pt-5" id="news-block">
        <div class="col-12 col-lg-9">
            <h3 class="post-block-title">
                <span>更多新聞</span>
            </h3>

            <div class="row news-all">
                {{ $paginator := .Paginate (where .Data.Pages "Type" "post") }}
                {{ range $index, $element := $paginator.Pages }}
                {{ if (eq $index 0) }}

                <div class="col-12">
                    <article>
                        <a href="{{ .Permalink }}">
                            <img class="img-fluid first-img" src="{{ .Params.image | relURL }}" alt="" />
                        </a>
                        <section class="news-info">
                            {{ range (.GetTerms "categories") }}
                            <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
                            {{ end }}
                            <small>{{ .Date | time.Format ":date_long" }}</small>
                        </section>
                        <h2 class="post-title">
                            <a href="{{ .Params.url }}">{{ .Params.title }}</a>
                        </h2>
                        <p class="post-depiction">
                            <a href="{{ .Permalink }}">{{ .Summary }}</a>
                        </p>
                        <hr>
                    </article>
                </div>

                {{ else }}

                <div class="col-12">
                    <div class="row align-items-center">
                        <div class="col-12 col-sm-6">
                            <a href="{{ .Permalink }}">
                                <img class="img-fluid" src="{{ .Params.image | relURL }}" alt="" />
                            </a>
                        </div>
                        <div class="col-12 col-sm-6">
                            <article>
                                <section class="news-info">
                                    {{ range (.GetTerms "categories") }}
                                    <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
                                    {{ end }}
                                    <small>{{ .Date | time.Format ":date_long" }}</small>
                                </section>
                                <h2 class="post-title">
                                    <a href="{{ .Params.url }}">{{ .Params.title }}</a>
                                </h2>
                            </article>
                        </div>
                        <span class="line">
                            <hr>
                        </span>
                    </div>
                </div>
                {{ end }}
                {{ end }}
            </div>

            {{ partial "paginator" . }}
        </div>
        <div class="col-12 col-lg-3">
            {{ partial "news-featured.html" . }}
        </div>
    </div>
</div>
{{ if .Content }}
<header>
    <h1 class="blog-post-title">
        <a class="text-dark text-decoration-none" href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
    </h1>
    <hr>
</header>
<section class="blog-post">
    {{ .Content }}
</section>
{{ end }}

<!-- {{ $paginator := .Paginate .Pages }}
{{ range $paginator.Pages }}

    {{ if $truncate }}
        {{ .Render "summary" }}
    {{ else }}
        {{ .Render "content" }}
    {{ end }}

{{ end }}

{{ partial "paginator" . }} -->

{{ end }}