<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <meta name="description" content="KindleEar is a service for Amazon Kindle owners that aggregates feeds and deliver them to your Kindle." />
    <title>{{ _(title) }} - Kindle's Ear</title>
    <link rel="apple-touch-icon" href="/static/apple-touch-icon.png" />
    <link rel="stylesheet" href="/static/pure-min.css" type="text/css" charset="utf-8"/>
    <link rel="stylesheet" href="/static/grids-responsive-min.css" type="text/css" charset="utf-8"/>
    <link rel="stylesheet" href="/static/base.css" type="text/css" charset="utf-8"/>
    <link rel="stylesheet" href="/static/tingle.min.css" type="text/css" charset="utf-8"/>
    <script type="text/javascript" src="/static/tingle.min.js"></script>
    <script type="text/javascript">
        function $(id_){return document.getElementById(id_);}
        function displayElement(id_) {
            document.getElementById(id_).style.display = "";
        }
        function hideElement(id_) {
            document.getElementById(id_).style.display = "none";
        }
        function formatParams(data) {
            var arr = [];
            for (var name in data) {
                arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
            }
            arr.push(("v_=" + Math.random()).replace(".", ""));
            return arr.join("&");
        }
        //Usage:
        //ajax({
        //    url: "./TestXHR.aspx",
        //    type: "POST",
        //    data: { name: "super", age: 20 },
        //    dataType: "json",          //optional,'json'/'text'/'xml'
        //    success: function (response, xml) {
        //        // obj.innerHTML = response or response.name
        //    },
        //    fail: function (status) {       //optional
        //        // some codes
        //    }
        //});
        function ajax(options) {
            options = options || {};
            options.type = (options.type || "GET").toUpperCase();
            options.dataType = options.dataType || "json";
            var params = formatParams(options.data || []);

            if (window.XMLHttpRequest) {
                var xhr = new XMLHttpRequest();
            } else {
                var xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    var status = xhr.status;
                    if (status >= 200 && status < 300) {
                        if (options.dataType == "json" || options.dataType == "JSON") {
                            var respData = JSON.parse(xhr.responseText);
                            //options.success && options.success(eval("(" + xhr.responseText + ")"), xhr.responseXML);
                            options.success && options.success(respData, xhr.responseXML);
                        } else {
                            options.success && options.success(xhr.responseText, xhr.responseXML);
                        }
                    } else {
                        options.fail && options.fail(status);
                    }
                }
            }

            if (options.type == "GET") {
                xhr.open("GET", options.url + "?" + params, true);
                xhr.send(null);
            } else if (options.type == "POST") {
                xhr.open("POST", options.url, true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send(params);
            }
        }
        //Add a method 'format' to string
        String.prototype.format = function(){
            var args = Array.prototype.slice.call(arguments);
            var count = 0;
            return this.replace(/%s/g, function(s,i){
                return args[count++];
            });
        }
    </script>
    {% block javascriptinhead %}{% endblock -%}
    {% block cssfiles %}{% endblock -%}
    {% block css %}{% endblock -%}
</head>

{% block bodytag -%}
<body>
{% endblock -%}
    <div id="content">
        <!-- Header Navigation -->
        <div class="header pure-menu pure-menu-horizontal">
        {% block header -%}
            <a href="/" class="pure-menu-heading pure-menu-link logo">KindleEar</a>
            {% block header_loginfo -%}
            <ul class="pure-menu-list home-menu">
                {% if nickname -%}
                    <li class="pure-menu-item"><a href="/admin" class="pure-menu-link">{{nickname}}</a></li>
                    <li class="pure-menu-item"><a href="/logout" class="pure-menu-link">{{_("Logout")}}</a></li>
                {% else -%}
                    <li class="pure-menu-item"><a href="/login" class="pure-menu-link">{{_("Login")}}</a></li>
                {% endif -%}
                <li class="pure-menu-item">
                    <a href="/lang/en"><img src="/static/us.gif" alt="EN" /></a>
                    <a href="/lang/zh-cn"><img src="/static/cn.gif" alt="CN" /></a>
                    <a href="/lang/tr-tr"><img src="/static/tr.gif" alt="TR" /></a>
                </li>
            </ul>
            {% endblock -%}
        {% endblock -%}
        </div>

        {% block menubar -%}
            {% if nickname -%}
            <div class="pure-menu pure-menu-horizontal pure-menu-scrollable app-menu">
                <ul class="pure-menu-list">
                    {% if current == "my" -%}
                    <li class="pure-menu-item pure-menu-selected"><span>{{_("Feeds")}}</span></li>
                    {% else -%}
                    <li class="pure-menu-item"><a href="/my" class="pure-menu-link">{{_("Feeds")}}</a></li>
                    {% endif -%}
                    {% if current == "setting" -%}
                    <li class="pure-menu-item pure-menu-selected"><span>{{_("Settings")}}</span></li>
                    {% else -%}
                    <li class="pure-menu-item"><a href="/setting" class="pure-menu-link">{{_("Settings")}}</a></li>
                    {% endif -%}
                    {% if current == "logs" -%}
                    <li class="pure-menu-item pure-menu-selected"><span>{{_("Logs")}}</span></li>
                    {% else -%}
                    <li class="pure-menu-item"><a href="/logs" class="pure-menu-link">{{_("Logs")}}</a></li>
                    {% endif -%}
                    {% if current == "admin" -%}
                    <li class="pure-menu-item pure-menu-selected"><span>{{_("Admin")}}</span></li>
                    {% else -%}
                    <li class="pure-menu-item"><a href="/admin" class="pure-menu-link">{{_("Admin")}}</a></li>
                    {% endif -%}
                    {% if current == "advsetting" -%}
                    <li class="pure-menu-item pure-menu-selected"><span>{{_("Advanced")}}</span></li>
                    {% else -%}
                    <li class="pure-menu-item"><a href="/adv" class="pure-menu-link">{{_("Advanced")}}</a></li>
                    {% endif -%}
                    {% if current == "shared" -%}
                    <li class="pure-menu-item pure-menu-selected"><span>{{_("Shared")}}</span></li>
                    {% else -%}
                    <li class="pure-menu-item"><a href="/library" class="pure-menu-link">{{_("Shared")}}</a></li>
                    {% endif -%}
                </ul>
            </div>
            {% endif -%}
        {% endblock -%}

        {% block content -%}
        {% endblock -%}
        <div class="footer-sticker"></div>
    </div>

    <div class="footer l-box">
        {% block footer -%}
        <p>
            <small>
            2013-2019 &copy; KindleEar&nbsp;@{{version}} ｜
            <a href="/static/faq{%if lang and not lang.startswith('zh')%}_en{%endif%}.html" target="_blank">FAQ</a> ｜
            <a href="https://github.com/cdhigh/kindleear" target="_blank">Github page</a> ｜
            <a href="https://console.cloud.google.com/appengine" target="_blank">App Engine</a>
            </small>
        </p>
        {% endblock -%}
    </div>

{% block jsfiles %}{% endblock -%}
{% block js %}{% endblock -%}
</body>
</html>
