<?js
var templates = env.conf.templates;
var examples = env.conf.opts.tutorials;
var css = templates.css;
var logo = templates.logo;
var footerText = templates.footerText;
var logoUrl = 'img/toast-ui.png';
var width, height;
var name = templates.name || package.name || title;
var tutorialsName = templates.tabNames.tutorials;
var apiName = templates.tabNames.api;
var style = '';
var version = '';
var logoLink = '';

if (logo) {
    logoUrl = logo.url || logoUrl;
    logoLink = logo.link || logoLink;
    width = logo.width;
    height = logo.height;
}

if (width) {
    style += 'width: ' + width;
}

if (height) {
    style += '; height: ' + height;
}

if (package) {
    version = package.version;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title><?js= title + ' | ' + name ?></title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="styles/prettify-jsdoc.css">
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/tui-doc.css">

    <?js if (css) { ?>
        <?js css.forEach(function(style) { ?>
            <link type="text/css" rel="stylesheet" href="<?js= style ?>">
        <?js }) ?>
    <?js } ?>
</head>
<body>
<nav class="lnb" id="lnb">
    <div class="logo" style="<?js= style ?>">
        <?js if (logoLink) { ?>
            <a href="<?js= logoLink?>" rel="noopener noreferrer" target="_blank">
                <img src="<?js= logoUrl?>" width="100%" height="100%">
            </a>
        <?js } else { ?>
            <img src="<?js= logoUrl?>" width="100%" height="100%">
        <?js } ?>
    </div>
    <div class="title">
        <h1><a href="index.html" class="link"><?js= name ?></a></h1>
        <?js if (version) { ?>
            <span class="version">v<?js= version ?></span>
        <?js } ?>
    </div>
    <div class="search-container" id="search-container">
        <input type="text" placeholder="Search">
        <ul></ul>
    </div>
    <?js if (examples) { ?>
        <ol class="lnb-tab">
            <li id="api-tab">
                <a href="#"><h4><?js= apiName ?></h4></a>
            </li>
            <li id="examples-tab">
                <a href="#"><h4><?js= tutorialsName ?></h4></a>
            </li>
        </ol>
    <?js } ?>
    <?js= this.nav ?>
</nav>
<div id="resizer"></div>

<div class="main" id="main">
    <?js= content ?>
</div>

<footer>
    <img class="logo" src="<?js= logoUrl?>" style="<?js= style ?>">
    <div class="footer-text"><?js= footerText || 'NHN Entertainment. Frontend Development Lab' ?></div>
</footer>
<script>prettyPrint();</script>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/tui-doc.js"></script>
<script src="scripts/linenumber.js"></script>
<?js if (!isTutorial) { ?>
    <script>
        var id = '<?js= docs[0].longname ?>_sub'.replace(/"/g, '_');
        var selectedApi = document.getElementById(id); // do not use jquery selector
        var $selectedApi = $(selectedApi);

        $selectedApi.removeClass('hidden');
        $selectedApi.parent().find('.glyphicon').removeClass('glyphicon-plus').addClass('glyphicon-minus');
        showLnbApi();
    </script>
<?js } else { ?>
    <script>
        showLnbExamples();
    </script>
<?js } ?>
</body>
</html>