## -*- coding: utf-8 -*-
<%namespace name="helper" file="index_helper.tmpl"/>
<%namespace name="math" file="math_helper.tmpl"/>
<%namespace name="comments" file="comments_helper.tmpl"/>
<%namespace name="pagination" file="pagination_helper.tmpl"/>
<%namespace name="feeds_translations" file="feeds_translations_helper.tmpl" import="*"/>
<%inherit file="base.tmpl"/>

<%block name="extra_head">
    ${parent.extra_head()}
    % if posts and (permalink == '/' or permalink == '/' + index_file):
        <link rel="prefetch" href="${posts[0].permalink()}" type="text/html">
    % endif
    ${math.math_styles_ifposts(posts)}
</%block>

<%block name="content">
    <%block name="content_header">
        ${feeds_translations.translation_link(kind)}
    </%block>
    % if 'main_index' in pagekind:
        ${front_index_header}
    % endif
    % if page_links:
        ${pagination.page_navigation(current_page, page_links, prevlink, nextlink, prev_next_links_reversed)}
    % endif
    <div class="postindex">
        % for post in posts:
            <article class="h-entry post-${post.meta('type')}" itemscope="itemscope" itemtype="http://schema.org/Article">
            <header>
                <h1 class="p-name entry-title"><a href="${post.permalink()}" class="u-url">${post.title()|h}</a></h1>
                <div class="metadata">
                    <p class="byline author vcard"><span class="byline-name fn" itemprop="author">
                    % if author_pages_generated and multiple_authors_per_post:
                        % for author in post.authors():
                            <a href="${_link('author', author)}">${author|h}</a>
                        % endfor
                    % elif author_pages_generated:
                        <a href="${_link('author', post.author())}">${post.author()|h}</a>
                    % else:
                        ${post.author()|h}
                    % endif
                    </span></p>
            <p class="dateline">
            <a href="${post.permalink()}" rel="bookmark">
            <time class="published dt-published" datetime="${post.formatted_date('webiso')}" itemprop="datePublished" title="${post.formatted_date(date_format)|h}">${post.formatted_date(date_format)|h}</time>
            % if post.updated and post.updated != post.date:
                <span class="updated"> (${messages("updated")}
                    <time class="dt-updated" datetime="${post.formatted_updated('webiso')}" itemprop="dateUpdated" title="${post.formatted_updated(date_format)|h}">${post.formatted_updated(date_format)|h}</time>)</span>
            % endif
            </a>
            </p>
                    % if not post.meta('nocomments') and site_has_comments:
                        <p class="commentline">${comments.comment_link(post.permalink(), post._base_path)}
                    % endif
                </div>
            </header>
            %if index_teasers:
                <div class="p-summary entry-summary">
                    ${post.text(teaser_only=True)}
                </div>
            %else:
                <div class="e-content entry-content">
                    ${post.text(teaser_only=False)}
                </div>
            %endif
            </article>
        % endfor
    </div>
    ${helper.html_pager()}
    ${comments.comment_link_script()}
    ${math.math_scripts_ifposts(posts)}
</%block>

<%block name="before_content">
    % if 'main_index' in pagekind and is_frontmost_index and featured and (theme_config.get('featured_large') or theme_config.get('featured_small')):
        % if theme_config.get('featured_on_mobile'):
            <div class="d-block">
        % else:
            <div class="d-none d-md-block">
        % endif
        % if featured and theme_config.get('featured_large'):
        <div class="jumbotron p-0 text-white rounded bg-dark">
            <div class="row bootblog4-featured-jumbotron-row">
                <div class="col-md-6 p-3 p-md-4 pr-0 h-md-250 bootblog4-featured-text">
                    <h1 class="display-4 font-italic"><a class="text-white" href="${featured[0].permalink()}">${featured[0].title()}</a></h1>
                    % if featured[0].previewimage:
                            <div class="lead my-3 mb-0">${featured[0].text(teaser_only=True, strip_html=theme_config.get('featured_strip_html', True))}</div>
                        </div>
                        % if theme_config.get('featured_large_image_on_mobile'):
                        <div class="col-md-6 p-0 h-md-250 text-right">
                        % else:
                        <div class="col-md-6 p-0 h-md-250 text-right d-none d-md-block">
                        % endif
                            <img class="bootblog4-featured-large-image" src="${featured[0].previewimage}" alt="${featured.pop(0).title()}">
                        </div>
                    % else:
                        <div class="lead my-3 mb-0">${featured.pop(0).text(teaser_only=True, strip_html=theme_config.get('featured_strip_html', True))}</div>
                        </div>
                    % endif
            </div>
        </div>
        % endif

        % if featured and theme_config.get('featured_small'):
            <div class="row mb-2">
            % if len(featured) == 1:
                <div class="col-md-12">
            % else:
                <div class="col-md-6">
            % endif
                    <div class="card flex-md-row mb-4 box-shadow h-md-250">
                       <div class="card-body d-flex flex-column align-items-start">
                           <h3 class="mb-0">
                               <a class="text-dark" href="${featured[0].permalink()}">${featured[0].title()}</a>
                           </h3>
                           % if featured[0].previewimage:
                               <div class="card-text mb-auto bootblog4-featured-text">${featured[0].text(teaser_only=True, strip_html=theme_config.get('featured_strip_html', True))}</div>
                               </div>
                               <img class="card-img-right flex-auto d-none d-lg-block" src="${featured[0].previewimage}" alt="${featured.pop(0).title()}">
                           % else:
                           <div class="card-text mb-auto bootblog4-featured-text">${featured.pop(0).text(teaser_only=True, strip_html=theme_config.get('featured_strip_html', True))}</div>
                           </div>
                            % endif
                    </div>
                </div>

            % if featured:
               <div class="col-md-6">
                    <div class="card flex-md-row mb-4 box-shadow h-md-250">
                       <div class="card-body d-flex flex-column align-items-start">
                           <h3 class="mb-0">
                               <a class="text-dark" href="${featured[0].permalink()}">${featured[0].title()}</a>
                           </h3>
                           % if featured[0].previewimage:
                               <div class="card-text mb-auto bootblog4-featured-text">${featured[0].text(teaser_only=True, strip_html=theme_config.get('featured_strip_html', True))}</div>
                               </div>
                               <img class="card-img-right flex-auto d-none d-lg-block" src="${featured[0].previewimage}" alt="${featured.pop(0).title()}">
                           % else:
                           <div class="card-text mb-auto bootblog4-featured-text">${featured.pop(0).text(teaser_only=True, strip_html=theme_config.get('featured_strip_html', True))}</div>
                           </div>
                            % endif
                    </div>
                </div>
            % endif
       </div>
    %endif
    </div>
% endif
</%block>
