{% 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 set_speak">
    <div class="set_table">
      <table>
        <colgroup>
          <col style="width: 198px;">
          <col span="4" style="width: 107px;">
          <col style="width: 230px;">
          <col span="2" style="width: 143px;">
          <col style="width: 55px;">
        </colgroup>
        <thead>
          <tr>
            <th rowspan="2"><button id="btn-add" class="speak_add on" onclick="addNewStep();">+Add</button></th>
            <th colspan="4">Data 표시 설정</th>
            <th rowspan="2">Repetition</th>
            <th colspan="2">속도(Speed)</th>
            <th rowspan="2"></th>
          </tr>
          <tr>
            <th>Sound</th>
            <th>Image</th>
            <th>Korean</th>
            <th>English</th>
            <th>Start</th>
            <th>End</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    <button href="#" class="set_btn reset" onclick="resetSetting()">Reset</a>
    <button href="#" class="set_btn" id="btn-save" onclick="saveSetting('speech')">Save</a>
    {% comment %} <button href="#" class="set_btn" id="btn-save">Save</a> {% endcomment %}
  </div>

  <script>
    $(document).ready(function () {
      try {
        let speech = settings.speech

        speechSettingInit(speech.steps.length)
        speechSettingStep(speech.steps)

        $('input[name="autoplay"]').attr('checked', speech.autoplay)
      } catch (error) {
        speechSettingInit(4)

        $('input[name=autoplay]').attr('checked', false)
      }
    })
  </script>
{% endblock %}