{% init show_right = True %}

{% if not show_menu %}
<style type="text/css">
  body {
    background: transparent;
  }

  .main {
    padding: 0px;
  }

  .nav {
    display: none;
  }

  .nav-left {
    display: none;
  }

  .x-body {
    left: 0px;
  }
</style>
{% end %}

{% if not show_search %}
<style type="text/css">
  .nav-left-search {
    display: none;
  }

  .search-box {
    display: none;
  }
</style>
{% end %}

{% if xconfig.DEBUG_HTML_BOX.get_bool() %}
<!-- 用于移动端或者其他不方便调试设备的样式调试 -->
<style type="text/css">
  * {
    box-sizing: border-box;
    border: solid 1px red;
  }
</style>
{% end %}

<style type="text/css" id="layout-css"></style>

<script type="text/javascript">
  // JavaScript执行的顺序和<script>标签定义的顺序有关
  // 这里动态生成<style>不会导致闪烁
  (function () {
    function loadStyle() {
      if (xnote.config.isPrintMode) {
        console.log("detect print mode");
        $(".nav-left").hide();
        $(".main-content").css("margin-left", "0px");
        return;
      }

      var navStyle = "{{_user_config.nav_style}}";
      var contentWidth = parseInt("{{CONTENT_WIDTH}}");
      var winWidth = $(window).width(); // 窗口的宽度
      var leftNavWidth = 0; // 左侧导航的宽度
      var contentLeftWidth = 0; // content-left宽度
      var styleText = "";
      var paddingLeft = 10;
      var paddingRight = 10;
      var showLeftNav = (navStyle == "left" && xnote.isDesktop());

      xnote.config.navStyle = navStyle;
      
      if (showLeftNav) {
        leftNavWidth = 180;
        xnote.device.leftNavWidth = leftNavWidth;
        contentWidth = winWidth - leftNavWidth;
      }

      if (winWidth >= xnote.MOBILE_MAX_WIDTH) {
        // 桌面版
        styleText += ".content-left { width: calc(100% - 300px); }\n";
        styleText += ".content-right { width: 300px; }\n";
        styleText += ".mobile-only { display: none; }\n";
        contentLeftWidth = contentWidth - 300; // 300是右侧边栏宽度
        if (navStyle == "left") {
          paddingLeft = leftNavWidth + 10;
        } else {
          paddingLeft = (winWidth - contentWidth) / 2 + 10;
          paddingRight = paddingLeft;
        }
        styleText += ".nav-left { width: ${leftNavWidth}px }\n".replace("${leftNavWidth}", leftNavWidth);
      } else {
        // 移动版
        styleText += ".content-left { width: 100%; }\n";
        styleText += ".content-right { display: none; }\n";
        styleText += ".nav {display: block;}\n";
        styleText += ".desktop-only { display: none; }\n";
        contentLeftWidth = winWidth;
        contentWidth = winWidth;
      }

      // 设置最小的高度
      var rootMinHeight = $(window).height() - 39;

      styleText += ".x-center, .nav-container {"
        + "float:left;"
        + "width:100%;"
        + "padding-left:" + paddingLeft + "px;"
        + "padding-right:" + paddingRight + "px;"
        + "}\n";

      styleText += ".main-content { width: 100%; padding-left:" + paddingLeft + "px; "
        + "padding-right: " + paddingRight + "px;}\n";

      styleText += ".root{ min-height: " + rootMinHeight + "px;}";

      // 设备大小信息
      xnote.device.isMobile = winWidth < xnote.MOBILE_MAX_WIDTH;
      xnote.device.isDesktop = winWidth >= xnote.MOBILE_MAX_WIDTH;
      xnote.device.contentWidth = contentWidth;
      xnote.device.contentLeftWidth = contentLeftWidth;

      // 居中的样式
      $("#layout-css").html(styleText);

      for (var i = 0; i < xnote.events.resizeHooks.length; i++) {
        xnote.events.resizeHooks[i]();
      }
    };

    loadStyle();
    xnote.loadStyle = loadStyle;

    $(window).on("resize", loadStyle);

  })();
</script>

{# 侧边栏(右侧)是否显示 #}
{% if not show_right %}
<style>
  .content-left {
    width: 100%;
  }
  .content-right {
    display: none;
  }
  .x-body {
    right: 0px;
  }
  .aside {
    display: none;
  }
</style>

{% end %}