<!doctype html>
<html lang="cs">
<head>
    <meta charset="utf-8">
    <title>Volba prezidenta České republiky 2018</title>
    <meta name="description" content="Kompletní přehled všech prezidentských kandidátů včetně jejich sociálních sítí, transparentních účtů, rozhovorů aj.">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta property="og:title" content="Volba prezidenta České republiky 2018" />
    <meta property="og:description" content="Kompletní přehled všech prezidentských kandidátů včetně jejich sociálních sítí, transparentních účtů, rozhovorů aj." />
    <meta property="og:image" content="https://petasittek.github.io/volba-prezidenta-cr-2018/img/app.png?3f978a" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./app.css">
</head>
<body>

<header class="container header">
    <h1>Volba prezidenta České republiky 2018</h1>
</header>

<main class="container">

    <section class="s" id="kandidati">
        <h2 class="s__title s__title--active">
            Kandidáti
        </h2>
        <h2 class="s__title">
            <a href="#debaty">Debaty</a>
        </h2>
        <div class="js-candidates"></div>
    </section>

    <section class="s" id="debaty">
        <h2 class="s__title">
            <a href="#kandidati">Kandidáti</a>
        </h2>
        <h2 class="s__title s__title--active">
            Debaty
        </h2>
        <div class="row js-debates" style="flex-wrap: wrap;"></div>
    </section>

</main>

<footer class="container footer">
    Zdroj obrázků kandidátů: <a href="http://www.ceskatelevize.cz/ct24/specialy/2315662-volba-prezidenta-2018" target="_blank">http://www.ceskatelevize.cz/ct24/specialy/2315662-volba-prezidenta-2018</a>
</footer>

<template class="tpl-debates">
    <div class="d column">
        <ul>
            <li class="d__list-item">
                <strong class="js-d-title"></strong>
            </li>
            <li class="d__list-item d__link-wrapper">
                <a href="" class="js-d-url" target="_blank"></a>
            </li>
            <li class="d__list-item">
                <i class="fa fa-fw fa-calendar" aria-hidden="true"></i>
                <span class="js-d-date"></span>
                <i class="fa fa-fw fa-clock-o" aria-hidden="true"></i>
                <span class="js-d-duration"></span>
            </li>
        </ul>
    </div>
</template>

<template class="tpl-candidates">
    <div class="c row">
        <div class="c__image-wrapper column column-20 js-c-id">
            <img class="c__image js-c-image">
        </div>
        <div class="column">
            <div>
                <h3 class="c__name">
                    <span class="js-c-name"></span>
                    <span class="c__degree js-c-degree"></span>
                </h3>
                <span class="js-c-bio"></span>
                <br>
                <span>
                    Navrhující strana: <strong class="c__highlight js-c-nominated-by"></strong>,
                    politická příslušnost: <strong class="c__highlight js-c-affiliation"></strong>
                </span>
            </div>
            <div class="row c__links row">
                <div class="column">
                    <ul>
                        <li>
                            <i class="fa fa-fw fa-globe" aria-hidden="true"></i>
                            <strong>Web</strong>: <span class="js-c-link-web"></span>
                        </li>
                        <li>
                            <i class="fa fa-fw fa-facebook" aria-hidden="true"></i>
                            <strong>Facebook</strong>: <span class="js-c-link-facebook"></span>
                        </li>
                        <li>
                            <i class="fa fa-fw fa-twitter" aria-hidden="true"></i>
                            <strong>Twitter</strong>: <span class="js-c-link-twitter"></span>
                        </li>
                        <li>
                            <i class="fa fa-fw fa-instagram" aria-hidden="true"></i>
                            <strong>Instagram</strong>: <span class="js-c-link-instagram"></span>
                        </li>
                    </ul>
                </div>
                <div class="column">
                    <ul>
                        <li>
                            <i class="fa fa-fw fa-credit-card" aria-hidden="true"></i>
                            <span class="js-c-link-account"></span>
                        </li>
                        <li>
                            <i class="fa fa-fw fa-question" aria-hidden="true"></i>
                            <span class="js-c-link-demagog"></span>
                        </li>
                        <li>
                            <i class="fa fa-fw fa-microphone" aria-hidden="true"></i>
                            <span class="js-c-link-dvtv"></span>
                        </li>
                        <li>
                            <i class="fa fa-fw fa-microphone" aria-hidden="true"></i>
                            <span class="js-c-link-interview24"></span>
                        </li>
                    </ul>
                </div>
                <div class="column">
                    <ul>
                        <li>
                            <i class="fa fa-fw fa-clock-o" aria-hidden="true"></i>
                            <span class="js-c-link-ct"></span>
                        </li>
                        <li>
                            <i class="fa fa-fw fa-thumbs-o-up" aria-hidden="true"></i>
                            <span class="js-c-link-prezident21"></span>
                        </li>
                        <li>
                            <i class="fa fa-fw fa-wikipedia-w" aria-hidden="true"></i>
                            <span class="js-c-link-wiki"></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script src="./app.js"></script>

</body>
</html>