<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
    <meta name="description" content="My static news generator">
    <meta name="generator" content="RSSPAPER">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <link rel="icon" type="image/png" href="static/img/icons/favicon.png">
    <meta name="theme-color" content="#3c790a">
    <!-- PWA -->
    <link rel="manifest" href="static/manifest.json" />
    <link rel="apple-touch-icon" href="static/img/icons/apple-icon-180.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- ios support -->
    <meta name="apple-mobile-web-app-status-bar" content="#fff" />
    <meta name="theme-color" content="#db4938" />
    <!-- End PWA -->
    <!-- Opengraph -->
    <meta property="og:image" content="img/screenshot.png">
    <meta property="og:title" content="{{ title }}">
    <meta property="og:type" content="website">
    <!-- End Opengraph -->
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/normalize.css">
    <link rel="stylesheet" href="static/css/main.css">
    <link href="static/css/mobile.css" rel="stylesheet" media="all and (max-width: 600px)">
    <link href="static/css/desktop.css" rel="stylesheet" media="all and (min-width: 601px)">
    <!-- End CSS -->
</head>
<body>
    <div class="container">
        <header class="header">
            <h1 class="title">{{ title }}</h1>
            <h2 class="subtitle"><span class="subtitle__separator">~</span> <span class="subtitle__text">My static generate newspaper</span> <span class="subtitle__separator">~</span></h2>
            <hr class="separator">
        </header>
        <main class="main">
            {% for article in articles %}
                <article class="feed__article article">
                    <header class="article__header">
                        <p class="article__header-img">
                            <a target="_blank" href="{{ article.link }}">
                                {% if article.cover %}
                                <img loading="lazy" src="{{ article.cover }}" alt="{{ article.title }}">
                                {% else %}
                                <img loading="lazy" src="static/img/newsreader-not-cover.png" alt="Not cover">
                                {% endif %}
                            </a>
                        </p>
                        <div class="article__titles">
                            <h1 class="article__title">
                                <a target="_blank" href="{{ article.link }}">{{ article.title }}</a>
                            </h1>
                            <h2 class="article__feed"><a target="_blank" href="{{ article.feed.link }}">{{ article.feed.title }}</a> <span class="article__date">{{ article.published-date-formatter }}</span></h2>
                        </div>
                    </header>
                </article>
            {% endfor %}
        </main>
    </div>
    <footer class="footer">
        <hr class="separator">
        <p class="footer__text">
            Generated with <a class="footer__link" href="https://github.com/tanrax/RSSpaper">RSSpaper</a> and a lot of <span class="footer__heard">❤️</span>️
        </p>
    </footer>
</body>
</html>
