<?js
    var hasCodeTab = false;
    var self = this;
?>

<header>
    <?js if (children.length > 0) { ?>
    <ul><?js
        children.forEach(function(t) { ?>
        <li><?js= self.tutoriallink(t.name) ?></li>
    <?js }); ?></ul>
    <?js } ?>

    <h2><?js= header ?></h2>
</header>

<?js if (isHtmlTutorial) { ?>
    <?js hasCodeTab = !!(codeJs || codeHtml) ? 'nav nav-tabs' : 'nav nav-tabs hidden'; ?>

    <ul id="example-nav" class="<?js= hasCodeTab ?>">
        <li role="presentation" id="example-result-btn" class="active" onclick="showResult()">
            <a href="#">Result</a>
        </li>
        <li role="presentation" id="example-js-btn" class="<?js= codeJs ? '' : 'hidden' ?>" onclick="showJs()">
            <a href="#">JS</a>
        </li>
        <li role="presentation" id="example-html-btn" class="<?js= codeHtml ? '' : 'hidden' ?>" onclick="showHtml()">
            <a href="#">HTML</a>
        </li>
    </ul>
    <article>
        <?js
            var src = 'tutorials/' + originalFileName + '.html';
        ?>
        <iframe id="example-result" width="100%" height="800" frameborder="0" src=<?js= src ?>></iframe>
        <div id="example-js" class="hidden"><pre class="prettyprint source"><?js= codeJs ?></pre></div>
        <div id="example-html" class="hidden"><pre class="prettyprint source"><?js= codeHtml ?></pre></div>
    </article>
<?js } else { ?>
<article class="readme">
    <?js= content ?>
</article>
<?js } ?>


<?js if (isHtmlTutorial) {?>
    <script>
        var exampleResult = document.getElementById('example-result');
        var exampleJs = document.getElementById('example-js');
        var exampleHtml = document.getElementById('example-html');
        var exampleResultBtn = document.getElementById('example-result-btn');
        var exampleJsBtn = document.getElementById('example-js-btn');
        var exampleHtmlBtn = document.getElementById('example-html-btn');

        function setActive(el) {
            el.className += ' active';
        }

        function setInactive(el) {
            el.className = el.className.replace(/\s*active\s*/g, '');
        }

        function show(el) {
            el.className = el.className.replace(/\s*hidden\s*/g, '');
        }

        function hide(el) {
            el.className += ' hidden';
        }

        function showJs() {
            hide(exampleHtml);
            hide(exampleResult);
            setInactive(exampleHtmlBtn);
            setInactive(exampleResultBtn);

            show(exampleJs);
            setActive(exampleJsBtn);
        }

        function showHtml() {
            hide(exampleJs);
            hide(exampleResult);
            setInactive(exampleJsBtn);
            setInactive(exampleResultBtn);

            show(exampleHtml);
            setActive(exampleHtmlBtn);
        }

        function showResult() {
            hide(exampleJs);
            hide(exampleHtml);
            setInactive(exampleJsBtn);
            setInactive(exampleHtmlBtn);

            show(exampleResult);
            setActive(exampleResultBtn);
        }
    </script>
<?js } ?>
