<link rel="stylesheet" href="../static/plugins/ep_codepad/static/css/font-awesome.min.css">
<style type="text/css">
    #codepad-inner {
        position: relative;
        max-width: 300px;
        margin: 0 auto;
        padding: 15px;
    }
</style>

<script src="../static/plugins/ep_codepad/static/js/jquery.js " type="text/javascript "></script>
<script src="../static/plugins/ep_codepad/static/js/cookies.js " type="text/javascript "></script>
<script type="text/javascript">
    var theme = "<%=theme%>";
    var themes = "<%= themes %>".split(',');;
    if (getCookie("codepad_theme") != '') theme = getCookie("codepad_theme");

    $(document).ready(function() {
        var select = $('#themesmenu');
        var option;
        $.each(themes, function(i) {
            option = new Option(themes[i], themes[i]);
            if (themes[i] === theme) option.selected = true;
            if (themes[i] !== 'Default') select.append($(option));
        });
    });
</script>

<div id="codepad-inner">
    <br />
    <div id="button" onclick="window.location='/files'" data-l10n-id="index.codepad "><i class="fa fa-files-o"></i> files
    </div>
    <br />Choose your theme!
    <select id="themesmenu" onchange="setCookie('codepad_theme',this.options[this.selectedIndex].value);">
        <option value="Default">Default</option>
    </select>
</div>

</div>
