{% extends 'setting/setting_base.html' %}
{% load staticfiles %}
{% load app_filters %}

{% block headscript %}
  <script src="{% static "js/setting.js" %}"></script>
  <script src="http://segimapp/settings.js?{% now "u" %}"></script>
  <script src="{% static "js/cefsharp.js" %}"></script>
{% endblock %}

{% block content %}
  <div class="set_content skin">
    <ul class="skin_list">
      <li>
        <div><img src="{% static 'img/theme/theme1.png' %}"/></div>
        <input type="radio" name="skin" id="skin1" value="theme1">
        <label for="skin1"></label>
      </li>
      <li>
        <div><img src="{% static 'img/theme/theme2.png' %}"/></div>
        <input type="radio" name="skin" id="skin2" value="theme2">
        <label for="skin2"></label>
      </li>
      <li>
        <div><img src="{% static 'img/theme/theme3.png' %}"/></div>
        <input type="radio" name="skin" id="skin3" value="theme3">
        <label for="skin3"></label>
      </li>
      <li>
        <div><img src="{% static 'img/theme/theme4.png' %}"/></div>
        <input type="radio" name="skin" id="skin4" value="theme4">
        <label for="skin4"></label>
      </li>
      <li>
        <div><img src="{% static 'img/theme/theme5.png' %}"/></div>
        <input type="radio" name="skin" id="skin5" value="theme5">
        <label for="skin5"></label>
      </li>
      <li>
        <div><img src="{% static 'img/theme/theme6.png' %}"/></div>
        <input type="radio" name="skin" id="skin6" value="theme6">
        <label for="skin6"></label>
      </li>
    </ul>
    <button class="set_btn" id="btn_save">Save</a>
  </div>
  <script>
    $(document).ready(function () {
      try {
        let skin = settings.skin
        $(`#skin${skin.substr(5,1)}`)[0].checked = true
      } catch (error) {
        $("#skin1")[0].checked = true
      }

      $("#btn_save").on("click", function() {
        saveSetting("skin");
      })
    })
  </script>
{% endblock %}