<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <link href='https://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="assets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="assets/github-dark.css" media="screen">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <title>{{config.title}} by {{config.author}}</title>
</head>

<body>
    <div id="container">
        <div class="inner">

            <header>
                <h1>{{config.title}}</h1>
                <h2>{{config.description}}</h2>
            </header>

            <section id="downloads" class="clearfix">
                <a href="{{config.homepage}}/zipball/master" id="download-zip" class="button"><span>Download .zip</span></a>
                <a href="{{config.homepage}}/tarball/master" id="download-tar-gz" class="button"><span>Download .tar.gz</span></a>
                <a href="{{config.homepage}}" id="view-on-github" class="button"><span>View on GitHub</span></a>
            </section>

            <hr>

            <section id="main_content">
                <div class="jumbotron">
                  <h2 id="cronstrue-demo">Demo</h2>
                  <form style="background-color:inherit; padding-left:0px; font-size:18px;">
                      <input type="text" id="expression" size="20" style="font-size:18px;" value="*/5 * * * *" class="textinput" />
                      <button type="button" class="button" style="font-size:18px;" id="translate">Translate</button>
                      <select name="i18n" id="i18n" style="font-size:15px; padding:3px;">
                        <option value="en" selected>English</option>
                        <option value="ca">Catalan</option>
                        <option value="cs">Czech</option>
                        <option value="es">Spanish</option>
                        <option value="da">Danish</option>
                        <option value="de">German</option>
                        <option value="fi">Finnish</option>
                        <option value="fr">French</option>
                        <option value="fa">Farsi</option>
                        <option value="he">Hebrew</option>
                        <option value="it">Italian</option>
                        <option value="id">Indonesia</option>
                        <option value="ja">Japanese</option>
                        <option value="ko">Korean</option>
                        <option value="nb">Norwegian</option>
                        <option value="nl">Dutch</option>
                        <option value="pl">Polish</option>
                        <option value="pt_BR">Portuguese (Brazil)</option>
                        <option value="pt_PT">Portuguese (Portugal)</option>
                        <option value="ro">Romanian</option>
                        <option value="ru">Russian</option>
                        <option value="sk">Slovakian</option>
                        <option value="sl">Slovenian</option>
                        <option value="sw">Swahili</option>
                        <option value="sv">Swedish</option>
                        <option value="tr">Turkish</option>
                        <option value="uk">Ukrainian</option>
                        <option value="zh_CN">Chinese (Simplified)</option>
                        <option value="zh_TW">Chinese (Traditional)</option>
                        <option value="be">Belarusian</option>
                        <option value="hu">Hungarian</option>
                        <option value="af">Afrikaans</option>
                      </select>
                      <div id="output" style="margin-top: 10px; font-weight: bold; color:blue;" class="output ">Every 5 minutes</div>
                  </form>
                </div>
                {{{content}}}
            </section>
            <footer>
                {{config.title}} is maintained by <a href="{{config.homepage}}">{{config.author}}</a><br> This page was generated
                by <a href="https://www.npmjs.com/package/handlebars">Handlebars.js</a> and <a href="https://www.npmjs.com/package/marked">marked</a>.
                Tactile theme by <a href="https://twitter.com/jasonlong">Jason Long</a>.
            </footer>


        </div>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>
    <script src="https://unpkg.com/cronstrue/dist/cronstrue.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/cronstrue/dist/cronstrue-i18n.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#translate").click(function () {
                var expression = $("#expression").val();
                var i18n = $("#i18n").val();
                var description = cronstrue.toString(expression, { throwExceptionOnParseError: false, locale: i18n });
                $("#output").text(description);
            });
        });
    </script>
</body>

</html>
