{% load i18n static juss_menus %}<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %} class="{% block html_class %}has-navbar-fixed-top0{% endblock %}">
  <head>
    <title>{% block title %}{{title}} | {{request.site.setting.site_name}}{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'juss/bulma.min.css' %}">
    <link rel="stylesheet" href="{% static 'juss/app.css' %}">
    {% block extrastyle %}{% endblock %}
    {% block extrahead %}{% endblock %}
    {% block responsive %}
      <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    {% endblock %}
    {% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE">{% endblock %}
  </head>
  {% load i18n %}

  <body class="{% block body_class %}{% endblock %}">
    {% block app %}
      {# 头部导航 #}
      <div class="columns is-gapless is-mobile mb-0">
	{% if not is_popup %}
	  <div class="column is-narrow">
	    {% include "juss/left_panel.html" %}
	  </div>
	{% endif %}
	<div class="column">
	  {% block nav-global %}
	    {% if not is_popup %}
	      {% include "juss/navbar.html" %}
	    {% endif %}
	  {% endblock %}
	  {% block main %}
	    <section class="section">
	      <div class="container">
		<div class="level">
		  <div class="level-left is-flex-direction-column is-align-items-flex-start">
		    <div class="level-item">
		      <div>
			<h1 class="title mb-2">{{title|truncatechars:40}}</h1>
			{% block breadcrumbs %}{% endblock %}
		      </div>
		    </div>
		  </div>
		  <div class="level-right">
		    <div class="level-right">
		      {% block header_right %}{% endblock %}
		    </div>
		  </div>
		</div>

		{# 消息提醒 #}
		{% block messages %}
		  {% if messages %}
		    {% for message in messages %}
		      <div class="notification is-{{message.tags }} is-light">
			<button class="delete"></button>
			{{message|capfirst}}
		      </div>
		    {% endfor %}
		  {% endif %}
		{% endblock %}

		{# main content #}
		{% block content %}{% endblock %}
	      </div>
	    </section>
	  {% endblock %}
	</div>
      </div>
      <div class="modal" id="modal-action">
	<div class="modal-background" data-modal-close></div>
	<div class="modal-card" >
	  <header class="modal-card-head" >
	    <p class="modal-card-title" ></p>
	    <button class="delete" aria-label="close" data-modal-close></button>
	  </header>
	  <form method="post">
	    {% csrf_token %}
	    <div class="form-inner" ></div>
	  </form>
	</div>
      </div>
      <script>
       class JussModal {
	 modal = null
	 form = null
	 url = ''

	 constructor(element) {
	   this.modal = element
	   this.form = element.querySelector("form")
	 }

	 async open(url) {
	   this.url = url
	   this.modal.classList.add("is-active")
	   const res = await fetch(url)
	   const resJson = await res.json()

	   this.modal.querySelector(".modal-card-title").innerHTML = resJson.title
	   this.modal.querySelector(".form-inner").innerHTML = resJson.html
	 }

	 close() {
	   this.url = ''
	   this.modal.classList.remove("is-active")
	   this.modal.querySelector(".modal-card-title").innerHTML = ""
	   this.modal.querySelector(".form-inner").innerHTML = ""
	 }
       }

       const modal = new JussModal(document.getElementById("modal-action"))

       document.querySelectorAll("[data-modal-action]").forEach(ele => {
	 ele.addEventListener("click", (event) => {
	   event.preventDefault()
	   modal.open(ele.dataset.modalAction)
	 })
       })
       document.querySelectorAll("[data-modal-close]").forEach(ele => {
	 ele.addEventListener("click", event => {
	   event.preventDefault()
	   modal.close()
	 })
       })


       const listener = async(event) => {
	 event.preventDefault()
	 event.submitter.classList.add("is-loading")
	 const action = event.submitter.dataset.action
	 const formData = new FormData(event.currentTarget)
	 formData.append('action', action)

	 try {
	   const res = await fetch(modal.url, {
	     method: 'POST',
	     body: formData
	   })
	   window.location.reload()
	   //modal.close()
	 } catch (err) {
	   alert('操作失败')
	   console.error(err)
	 }
       }
       modal.form.addEventListener("submit", listener)
      </script>
      <script>
       const navbarBurger = document.querySelector(".navbar-burger");
       const leftPanel = document.querySelector(".juss-left-menu")
       if(localStorage.getItem("left-panel-active") !== "false") {
         navbarBurger.classList.add("is-active")
         leftPanel.classList.remove("is-hidden")
       } else  {
         navbarBurger.classList.remove("is-active")
         leftPanel.classList.add("is-hidden")
       }
       navbarBurger.addEventListener("click", (event) => {
         if(localStorage.getItem("left-panel-active") === "true") {
           navbarBurger.classList.remove("is-active")
           leftPanel.classList.add("is-hidden")
           localStorage.setItem("left-panel-active", "false")
         } else  {
           navbarBurger.classList.add("is-active")
           leftPanel.classList.remove("is-hidden")
           localStorage.setItem("left-panel-active", "true")
         }
       })
      </script>
    {% endblock %}
    <script src="{% static "juss/feather.min.js" %}"></script>
    <script src="{% static "juss/juss.js" %}"></script>
    <script src="{% static "juss/jdenticon.js" %}"></script>
    <script>
     feather.replace();
    </script>
    {% block footer %}{% endblock %}
  </body>
</html>
