{% extends FUNC_BASE_HTML %}
{% load i18n %}
{% load utils %}



{% block css %}{{ block.super }}
<style>
<!--
.errorlist {
  color: #ff0000;
}

.my-table1 ul {
  list-style-type: none;
}

.my-tab1-table th {
	width: 50%;
}
.my-schedule-cell ul {
	list-style-type: none;
}

.my-exclist ul {
	list-style-type: none;
}

.my-table1,
.my-table2 {
  width: 90%;
  margin: 0 auto 1em auto;
}

.my-table1 {
  border-collapse: collapse;
}
.my-table1,
.my-table1 thead,
.my-table1 tbody,
.my-table1 tfoot {
  border: 1px solid #000000;
}
.my-table1 td {
  width: 50%;
}

.my-table2 {
  border-collapse: collapse;
  table-layout: fixed;
}
.my-table2,
.my-table2 thead,
.my-table2 tbody,
.my-table2 tfoot {
  border: 1px solid #000000;
}
.my-table2 thead td,
.my-table2 tbody td,
.my-table2 tfoot td {
  width: 50%;
}
.my-table2 tbody td,
.my-table2 tfoot td {
  position: relative;
  height: 24px;
}
.my-table2 button[data-iscreatetargetbutton],
.my-table2 button[data-isremovetargetbutton] {
  position: absolute;
  right: -25px;
  top: 0;
  display: inline-block;
  border: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.my-table2 button[data-iscreatetargetbutton] {
  background: url({% static "img/common/circle_plus.png" %}) no-repeat left top;
}
.my-table2 button[data-isremovetargetbutton] {
  background: url({% static "img/common/circle_minus.png" %}) no-repeat left top;
}

-->
</style>

{% for s in storagetypelist %}
{% include s.style %}
{% endfor %}

{% endblock css %}



{% block js %}
{{ block.super }}
<script type="text/javascript" src="{% static 'js/jquery/1.10.2/jquery-1.10.2.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery/ui/1.11.1/jquery-ui.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery/ui/1.11.1/jquery.ui.cWidget.js' %}"></script>
<script type="text/javascript">
<!--

{# ========================================================================= #}
(function($, win, doc) {
    // name: TOTAL_FORMS, MAX_NUM_FORMS, INITIAL_FORMS
    function getManagementForm (prefix, name) {
      var raw_value = $('#id_'+ prefix +'-'+ name).val();
      return parseInt(raw_value);
    }
    function setManagementForm (prefix, name, value) {
      return $('#id_'+ prefix +'-'+ name).val(value);
    }
    function createForm (prefix, options) {
      var emptyForm = options['emptyForm'];
      var $before = options['$before'];
      var $appendTo = options['$appendTo'];

      var $TOTAL_FORMS = $('#id_'+ prefix +'-TOTAL_FORMS');
      var $MAX_NUM_FORMS = $('#id_'+ prefix +'-MAX_NUM_FORMS');
      var $INITIAL_FORMS = $('#id_'+ prefix +'-INITIAL_FORMS');

      var totalNumForms = getManagementForm(prefix, 'TOTAL_FORMS');
      var maxNumForms = getManagementForm(prefix, 'MAX_NUM_FORMS');
      var initialNumForms = getManagementForm(prefix, 'INITIAL_FORMS');

      if (totalNumForms >= maxNumForms) {
        return undefined;
      }
      emptyForm = emptyForm.replace(new RegExp('__prefix__', 'g'), totalNumForms);
      var $emptyForm = $(emptyForm);
      if ($before) {
        $emptyForm.each(function(e) {
          $(this).insertBefore($before);
        });
      }
      if ($appendTo) {
        $appendTo.append($emptyForm);
      }

      totalNumForms = initialNumForms = totalNumForms + 1;
      setManagementForm(prefix, 'TOTAL_FORMS', totalNumForms);
      setManagementForm(prefix, 'INITIAL_FORMS', initialNumForms);

      return $emptyForm;
    }
    function removeForm (prefix, formsSelector, $form) {
      var $forms = $(formsSelector);
      var index = 0;
      $forms.each(function(_i, _form) {
        var $_form = $(_form);
        if ($_form.is($form)) {
          $_form.remove();
          var totalNumForms = getManagementForm(prefix, 'TOTAL_FORMS') - 1;
          setManagementForm(prefix, 'TOTAL_FORMS', totalNumForms);
          setManagementForm(prefix, 'INITIAL_FORMS', totalNumForms);
        } else {
          $('input,select,textarea', $_form)
            .each(function(_i, _input) {
              var $_input = $(_input);
              var idRe = RegExp('id_'+ prefix +'-[0-9]+-');
              var nameRe = RegExp(prefix +'-[0-9]+-');
              var oldId = $_input.attr('id');
              var newId = oldId.replace(idRe, 'id_'+ prefix +'-'+ index +'-');
              var oldName = $_input.attr('name');
              var newName = oldName.replace(nameRe, prefix +'-'+ index +'-');
              $_input
                .attr('id', newId)
                .attr('name', newName);
            });
          index++;
        }
      });
      return $form;
    }
  $.extend({
    formset: function () {
      var prefix = arguments[0];
      var api = arguments[1];
      var api_arguments = Array.prototype.slice.call(arguments, 2);
      switch (api) {
        case 'management':
          var name = api_arguments[0];
          var value = api_arguments[1];
          if (value === undefined) {
            return getManagementForm(prefix, name);
          } else {
            return setManagementForm(prefix, name, value);
          }
        case 'create':
          var options = api_arguments[0];
          return createForm(prefix, options);
        case 'remove':
          var formsSelector = api_arguments[0];
          var $form = api_arguments[1];
          return removeForm(prefix, formsSelector, $form);
        default:
          return this;
      }
    }
  });
}(jQuery, window, window.document));
{# ========================================================================= #}

function waiting () {
  try {
    parent.wait.start();
  } catch (e) {
  }
}
function resize () {
  try {
    parent.iFrameResize();
  } catch (e) {
  }
}

// (function($) {

  $(function() {

    (function(){
      var $table = $('#id_ignore_table');
      var formsSelector = '#id_ignore_table tbody';
      var $forms = $(formsSelector);
      var $tfoot = $('tfoot', $table);
      var $template = $('#id_template_{{ ignoreformset.prefix }}');

      function remove ($form) {
        $.formset('{{ ignoreformset.prefix }}', 'remove', formsSelector, $form);
        resize();
      }
      function attach ($form) {
        var $removeButton = $('[data-isremovetargetbutton="yes"]', $form);
        $removeButton
          .on('click', function(e) {
            remove($form);
          });
      }
      function create () {
        var $form = $.formset('{{ ignoreformset.prefix }}', 'create', {
          'emptyForm': $template.html(),
          '$before': $tfoot
        });
        attach($form);
        resize();
      }

      $forms.each(function(i, form) {
        var $form = $(form);
        attach($form);
      });
      var createButton = $('[data-iscreatetargetbutton="yes"]', $tfoot);
      createButton
        .on('click', function(e) {
          create();
        });

    }());

  });
// })($.noConflict(true));
// -->
</script>

{% comment %}
{% for s in storagetypelist %}
{% include s.script %}
{% endfor %}
{% endcomment %}

{% endblock js %}



{% block ajaxform_modified %}{{ block.super }}{% endblock ajaxform_modified %}
{% block to_ajaxform %}{% endblock to_ajaxform %}



{% block function %}
<div class="basic_function"><div style="padding:0 5%;">

  {{ mainform.epk }}
  <table class="my-table1">
    <tbody>
      <tr>
        <th>{{ mainform.name.label }}</th>
        <td>{{ mainform.name.errors }}{{ mainform.name }}</td>
      </tr>
      <tr>
        <th>{{ mainform.direction.label }}</th>
        <td>{{ mainform.direction.errors }}{{ mainform.direction }}</td>
      </tr>
      <tr>
        <th>{{ mainform.interval.label }}</th>
        <td>{{ mainform.interval.errors }}{{ mainform.interval }}</td>
      </tr>
      <tr>
        <th>{{ mainform.maxfilesize.label }}</th>
        <td>{{ mainform.maxfilesize.errors }}{{ mainform.maxfilesize }}</td>
      </tr>
    </tbody>
  </table>

  {{ ignoreformset.management_form }}
  <table id="id_ignore_table" class="my-table2">
    <thead>
      <tr>
        <th colspan="2">除外ファイル</th>
      </tr>
    </thead>
    {% for form in ignoreformset %}
    <tbody>
      <tr>
        <td>
          {{ form.ignore_pattern.errors }}
          {{ form.ignore_pattern }}
        </td>
        <td>
          {{ form.ignore_type.errors }}
          {{ form.ignore_type }}
          <button type="button" data-isremovetargetbutton="yes"></button>
        </td>
      </tr>
    </tbody>
    {% endfor %}
    <tfoot>
      <tr>
        <td>
        </td>
        <td>
          <button type="button" data-iscreatetargetbutton="yes"></button>
        </td>
      </tr>
    </tfoot>
  </table>
  <script id="id_template_{{ ignoreformset.prefix }}" type="text/template">
    {% with ignoreformset.empty_form as form %}
    <tbody>
      <tr>
        <td>
          {{ form.ignore_pattern.errors }}
          {{ form.ignore_pattern }}
        </td>
        <td>
          {{ form.ignore_type.errors }}
          {{ form.ignore_type }}
          <button type="button" data-isremovetargetbutton="yes"></button>
        </td>
      </tr>
    </tbody>
    {% endwith %}
  </script>

  {% with targetformset as formset %}
  {% with '同期対象' as caption %}
  {% with '2' as min %}
    {% include TARGETS_HTML %}
  {% endwith %}
  {% endwith %}
  {% endwith %}

  <div style="width:100%;position:relative;height:2em;">
    <input style="position:absolute;left:0;"
           type="button"
           value="一覧へ戻る"
           onclick="waiting();location.href='./entries';" />
    <input style="position:absolute;right:0;"
           type="submit"
           name="save"
           value="保存"
           onclick="waiting();" />
  </div>

</div></div>
{% endblock function %}