<!DOCTYPE html>
<!-- Fur fonts html -->
<html lang="en"
      ng:app="FontThemeApp"
      ng:controller="FontThemCtrl">
<head>
    <meta charset="UTF-8"/>
    <title>{{pkg.name}}</title>
    <link rel="stylesheet" href="./assets/stylesheets/gallery.css"/>
    <link rel="icon" href="./assets/images/fur-favicon.png"/>
    <style>
            {{#each examples}}        @font-face {
                font-family: {{theme}}  ;
                src: url('{{filename}}')
            }

            .font-{{theme}}{
                font-family: {{theme}}, serif;
            }

            #setting-section {
                position: fixed;
                left: 0;
                bottom: 0;
                width: 100%;
                padding: 8px 8px;
                background-color: rgba(255, 255, 255, 0.95);
                font-size: 0.75em;
                border-top: 1px solid #EEE;
            }

            #setting-section label {
                color: #AAA;
                display: inline-block;
                margin: 0 2px 0;
                z-index: 22;
            }

            .wide-input {
                width: 400px;
            }
            {{/each}}
        .sample-label {
            margin: 5px 0;
            line-height: 1em;
        }

        .l {
            font-size: 2em;
        }

        .m {
            font-size: 1em;
        }

        .s {
            font-size: 0.5em;
        }

        .sample-td {
            padding: 10px 20px;
        }

        .v-center {
            vertical-align: middle;
        }

        .w120 {
            width: 120px;
        }
    </style>
    <script src="./assets/javascripts/angular.js"></script>
    <script src="./assets/javascripts/gallery.js"></script>
    <script>
        (function (ng) {
            ng.module('FontThemeApp', []).controller('FontThemCtrl', function FontThemCtrl($scope) {
                $scope.sampleText = 'Grumpy wizards make toxic brew for the evil Queen and Jack.';
            });
        })(angular);
    </script>
</head>
<body>
<header>
    <div class="container">
        <h1 onclick="location.reload()">{{pkg.name}}</h1>
    </div>
</header>
<main>
    <div class="container">
        <table>
            <colgroup>
                <col style="width:90px;"/>
                <col style="width:120px;"/>
                <col/>
            </colgroup>
            <thead>
            <tr>
                <th>Theme</th>
                <th>Fonts</th>
                <th>Sample</th>
            </tr>
            <tbody>
            {{#each examples}}
                <tr>
<th>{{theme}}</th>
                    <td class="text-center v-center" style="max-width:210px;"><a class="font-{{theme}}"
                                                                                 href="{{filename}}">{{name}}</a></td>
                    <td class="sample-td font-{{theme}}">
                        <div class="sample-label l" ng:bind="sampleText"></div>
                        <div class="sample-label m" ng:bind="sampleText"></div>
                        <div class="sample-label s" ng:bind="sampleText"></div>
                    </td>
                </tr>
            {{/each}}
            </tbody>
        </table>
    </div>
</main>
<section id="setting-section">
    <label for="sample-text-input">Sample text</label>
    <input ng:model="sampleText" class="wide-input" placeholder="sample text" id="sample-text-input">
</section>
<footer>
    <a href="https://github.com/tick-tack/fur"><img src="./assets/images/fur-banner.png" class="footer-logo"></a>
    <small>© 2014 Taka Okunishi</small>

    <a id="jump-to-top-btn" href="#">⇧Jump to Top</a>
    <nav>
        <a class="nav-item" href="https://github.com/fur-labo/fur/">Homepage</a>
        <a class="nav-item" href="http://fur-labo/fur/apiguide/">API Guide</a>
    </nav>
</footer>
</body>
</html>
