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



{% block css %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/jquery/ui/1.11.1/themes/smoothness/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL|add:"css/jquery/ui/1.11.1/jquery.ui.cWidget.css"|with_version }}" />
<style type="text/css">
<!--


{%comment%}{%endcomment%}
.c-ui-mcbselect {
	border:solid 1px #c0c0c0;
	overflow:scroll;
}
.c-ui-mcbselect label {
	display:block;
}
.c-ui-mcbselect input {
	vertical-align:middle;
}
.c-ui-mcbselect .c-ui-mcbselect-on {
	background-color:#1e90ff;
	color:#ffffff;
}
{%comment%}{%endcomment%}
.searchbox {
	background:url({{ STATIC_URL }}img/pkg/logext/search.png) no-repeat 2px center;
	padding-left:20px;
}



.errorlist {
	color:#ff0000;
	padding-left:1.5em;
}

.class_messagearea {
	background-color:#ccc;
	border:1px solid #aaa;
	margin:3px auto;
	padding:3px;
}

.class_ol {
	margin:1em;
	padding-left:1em;
}
.class_ol a {
	text-decoration:none;
	color:#0000ff;
}

.class_entry {
	position:relative;
	border:solid 1px #c9c9c9;
	width:60%;
	margin:0 auto;
}
.class_entry .class_entry_header {
	background-color:#1e90ff;
	padding-left:0.5em;
	height:2em;
	line-height:2em;
	cursor:pointer;

	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
}
.class_entry .class_entry_body {
	width:100%;
}
.class_entry .class_entry_body table {
	border-collapse:collapse;
	width:100%;
}
.class_entry .class_entry_body table th,
.class_entry .class_entry_body table td {
	border-bottom:#e3e3e3 1px dotted;
	text-align:left;
	padding:3px 10px;
	font-weight:normal;
}
.class_entry .class_entry_body table th {
	width:30%;
}
.class_entry .class_entry_body table td input[type="text"] {
	width:70%;
}
.class_entry .class_entry_body table td .class_operationlist ul {
	list-style:none;
}
.class_entry .class_entry_body table td .class_operationlist ul li {
	width:33%;
	float:left;
}
.class_entry .class_entry_body table td .class_daylist ul {
	list-style:none;
}
.class_entry .class_entry_body table td .class_daylist ul li {
	width:4.5em;
	float:left;
}
.class_entry .class_entry_button {
	position:absolute;
	width:24px;
	height:2em;
	line-height:2em;
	top:0;
	right:-24px;
	display:table;
}
.class_entry .class_entry_button div {
	display:table-cell;
	vertical-align:middle;
}
.class_entry .class_entry_button div label {
/*	background:url(/static/img/pkg/logext/delete.png) no-repeat left top;*/
	display:block;
	width:24px;
	height:24px;
	line-height:24px;
	overflow:hidden;
	cursor:pointer;
}
.class_entry .class_entry_button.class_del_entry_button div label {
	background:url(/static/img/pkg/logext/delete.png) no-repeat left top;
}
.class_entry .class_entry_button.class_add_entry_button div label {
	background:url(/static/img/pkg/logext/add.png) no-repeat left top;
} 
.class_entry .class_entry_button div label input[type="checkbox"] {
	opacity:0;
}
.class_entry.class_error_entry .class_entry_header {
	background-color:#ff4444;
	color:#ffffff;
}
.class_entry.class_deleted_entry .class_entry_header {
	background-color:#c0c0c0;
}
.class_entry.class_deleted_entry .class_entry_body {
	/*background-color:#939393;*/
	background-color:#d0d0d0;
}
.class_entry.class_deleted_entry .class_entry_button div label {
	background-position:left bottom;
}
.class_entry.class_blank_entry .class_entry_header {
	background-color:#ffffff;
}

.class_period_cell > * {
	vertical-align:middle;
	display:inline-block;
}
.class_period_cell > div {
	width:71%;
}

.class_username_cell > * {
	vertical-align:middle;
	display:inline-block;
}

-->
</style>
{% endblock css %}



{% block js %}
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery/1.10.2/jquery-1.10.2.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery/ui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL|add:"js/jquery/ui/1.11.1/jquery.ui.cWidget.js"|with_version }}"></script>
<script type="text/javascript">
<!--


(function($) {
{%comment%}{%endcomment%}
/*
 * mcbselect
 */
$.widget('ui.mcbselect', {
	version: '1.0.0',
	options: {
		width: '20em',
		height: '10em',
		__dummy__: 1
	},
	_create: function() {
		var $element = this.element;
		var options = this.options;

		$element.addClass('c-ui-mcbselect');
		$element.css({
			width: options.width,
			height: options.height});
		$element.find('input:checkbox').each(function() {
			var $cb = $(this);
			$cb
			.on('change', function() {
				if ($cb.prop('checked')) {
					$cb.parent().addClass('c-ui-mcbselect-on');
				} else {
					$cb.parent().removeClass('c-ui-mcbselect-on');
				}
			})
			.trigger('change');

			{# FIXME: IE とそれ以外で change イベントの発生順が異なっていたため応急処置 #}
			setInterval(function() {
				if ($cb.prop('checked')) {
					$cb.parent().addClass('c-ui-mcbselect-on');
				} else {
					$cb.parent().removeClass('c-ui-mcbselect-on');
				}
			}, 50);
		});
	},
	__dummy__: 1
})
{%comment%}{%endcomment%}
})(jQuery);


(function() {
	function addForm(prefix, empty_form_html, $el) {
		var $totalForms = $("#id_"+ prefix +"-TOTAL_FORMS");
		var $maxNumForms = $("#id_"+ prefix +"-MAX_NUM_FORMS");
		var totalFormsCount = parseInt($totalForms.val());
		var maxNumFormsCount = parseInt($maxNumForms.val());

		if(totalFormsCount >= maxNumFormsCount) {
			return undefined;
		}

		empty_form_html = empty_form_html.replace(new RegExp("__prefix__", "g"), totalFormsCount);
		$empty_form = $(empty_form_html);
		$empty_form.each(function(e) {
			$(this).insertBefore($el);
		});

		$totalForms.val(totalFormsCount + 1);

		return $empty_form;
	}

	$.extend({
		formset: function() {
			var api = arguments[0];
			var args = Array.prototype.slice.call(arguments, 1);

			switch(api) {
				case "add":
					var prefix = args[0];
					var empty_form_html = args[1];
					var $el = args[2];
					return addForm(prefix,
					               empty_form_html,
					               $el);
				default:
					return this;
			}
		},
		__dummy__: 1
	});

})(jQuery);



(function($) {
$(function() {

	$(".class_timerange input[type='text']")
	.timespinner({step:5})
	.width("4em");

	$(".class_entry_body").each(function(i) {
		var $entry = $(this).parent();
		if($(this).find(".errorlist").size()) {
			$entry.addClass("class_error_entry");
		}
	});

	function attachEntryAction($entry, open) {
		var $header = $entry.find(".class_entry_header");
		var $body = $entry.find(".class_entry_body");
		//var $button = $entry.find(".class_entry_button");
		var $button = $entry.find(".class_del_entry_button");

		$header
		.on("click", function(e) {
			//$body.find("table")
			$body
			.toggle();
			parent.iFrameResize();
		});
		if(!open) {
			$header.trigger("click");
		}

		$body.find(".class_timerange input[type='text']").each(function(i) {
			$(this)
			.timespinner({step:5})
			.width("4em");
		});
		$body.find(".mcbselect").each(function(i) {
			$(this).mcbselect();
			var $label1 = $(this).find('label:first-child');
			var $labels = $label1.nextAll('label');
			var $checkbox1 = $label1.find('input:checkbox');
			var $checkboxs = $labels.find('input:checkbox');

			$checkbox1.on('click', function(e) {
				var checked = $(this).prop('checked');
				$checkboxs
				.prop('checked', checked)
				.trigger('change');
			});

			$checkboxs.on('click', function(e) {
				var checkedall = true;
				$checkboxs.each(function(i) {
					checkedall = checkedall && $(this).prop('checked');
				});
				if(!checkedall) {
					$checkbox1
					.prop('checked', checkedall)
					.trigger('change');
				}
			});
			if($checkbox1.prop('checked')) {
				$checkboxs.prop('checked', true);
			}
		});
		$body.find(".searchbox").each(function(i) {
			$(this)
			.width($(this).next('.mcbselect').width()-6)
			.on('keyup', function(e) {
				var key = $(this).val();
				$(this).next('.mcbselect').each(function(i) {
					$(this).find('label').each(function(i) {
						if(i) {
							if($(this).find('input').val().indexOf(key) != -1) {
								$(this).show();
							} else {
								$(this).hide();
							}
						}
					});
				});
			});
		});

		$button.find("input")
		.on("change", function(e) {
			var checked = $(this).prop("checked");
			var $entry = $(this).parent().parent().parent().parent();
			if(checked) {
				$entry.addClass("class_deleted_entry");
			} else {
				$entry.removeClass("class_deleted_entry");
			}
		});
	}

	$(".class_entry").each(function(i) {
		attachEntryAction($(this), false);
	});

	var template = $("#id_template").html();
	var $blank = $("#id_blank_entry");
	$("#id_addform")
	.on("click", function(e) {
		$entry = $.formset("add", "{{ formset.prefix }}",
//		                          $("#id_template").html(),
//		                          $("#id_blank_entry"));
		                          template,
		                          $blank);
		if($entry) {
			attachEntryAction($entry, true);
			parent.iFrameResize();
		} else {
			$("#id_blank_entry h3").text("{% trans "LogExt: Can not add any more entries." %}");
		}
	});

});
})($.noConflict(true));
//-->
</script>
<script type="text/template" id="id_template">
  {% with formset.empty_form as empty_form %}
  <div class="class_entry">
    <h3 class="class_entry_header"></h3>
    <div class="class_entry_body">
      <table>
        <tr>
          <th>{{ empty_form.name.label }}({% trans "LogExt: required" %})</th>
          <td>{{ empty_form.name }}</td>
        </tr>
        <tr>
          <th>{% trans "LogExt: Access Timestamp" %}({% trans "LogExt: required" %})</th>
          <td class="class_period_cell">
            <div>
              <div>
                <div class="class_daylist">{{ empty_form.ts_days }}</div>
              </div>
              <br/>
              <br/>
              <br/>
              <div>
                <div class="class_timerange">{{ empty_form.ts_time1 }}{% trans "LogExt: -" %}{{ empty_form.ts_time2 }}</div>
              </div>
            </div>
            <label>{{ empty_form.ts_not }}{{ empty_form.ts_not.label }}</label>
          </td>
        </tr>
        <tr>
          <th>{{ empty_form.usernamelist.label }}({% trans "LogExt: required" %})</th>
          <td class="class_username_cell">
            <input class="searchbox" type="text"/>
            <div class="mcbselect">
              <label for="{{ empty_form.usernamelist_all.auto_id }}">{{ empty_form.usernamelist_all }}{{ empty_form.usernamelist_all.label }}</label>
              {% for cb in empty_form.usernamelist %}
                {{ cb.render }}
              {% endfor %}
            </div>
            <label>{{ empty_form.usernamelist_not }}{{ empty_form.usernamelist_not.label }}</label>
          </td>
        </tr>
        <tr>
          <th>{{ empty_form.hostname.label }}</th>
          <td>{{ empty_form.hostname }}<label>{{ empty_form.hostname_not }}{{ empty_form.hostname_not.label }}</label></td>
        </tr>
        <tr>
          <th>{{ empty_form.ipaddress.label }}</th>
          <td>{{ empty_form.ipaddress }}<label>{{ empty_form.ipaddress_not }}{{ empty_form.ipaddress_not.label }}</label></td>
        </tr>
        <tr>
          <th>{{ empty_form.operation.label }}({% trans "LogExt: required" %})</th>
          <td><div class="class_operationlist">{{ empty_form.operation }}</div></td>
        </tr>
        <tr>
          <th>{{ empty_form.result.label }}</th>
          <td>{{ empty_form.result }}</td>
        </tr>
        <tr>
          <th>{{ empty_form.sharename.label }}</th>
          <td>{{ empty_form.sharename }}</td>
        </tr>
        <tr>
          <th>{{ empty_form.path.label }}</th>
          <td>{{ empty_form.path }}</td>
        </tr>
      </table>
    </div>
    <div class="class_entry_button class_del_entry_button">
      <div><label>{{ empty_form.DELETE }}</label></div>
    </div>
  </div>
  {% endwith %}
</script>
{{ block.super }}
<script type="text/javascript">
<!--
$(function() {
});
//-->
</script>
{% endblock js %}



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



{% block function %}
<div class="basic_function">

  <div class="class_messagearea">
    {% trans "LogExt: Please input alert and click apply." %}<br/>
    {% blocktrans with max=formset.management_form.MAX_NUM_FORMS.value %}LogExt: Alert max is {{ max }}.{% endblocktrans %}<br/>
    <br/>
    {% trans "LogExt: If you wont to send alert mail." %}<br/>
    <ol class="class_ol">
      {% trans "mailnotice" as mailnotice %}
      <li>{% blocktrans with "/admin/system/notice/mail/mailnotice/" as notice_url and mailnotice as notice_title %}LogExt: Open "<a href='{{ notice_url }}'>{{ notice_title }}</a>".{% endblocktrans %}</li>
      <li>{% trans "LogExt: Enable notice." %}</li>
      <li>{% trans "LogExt: Input settings." %}</li>
      <li>{% trans "LogExt: Enable system event." %}</li>
      <li>{% trans "Apply" as apply_transed %}{% blocktrans with apply_transed as button_name %}LogExt: Click "{{ button_name }}".{% endblocktrans %}</li>
    </ol>
  </div>

  <div id="id_entrylist">
    {{ formset.management_form }}
    {% for form in formset %}
      {% with form.DELETE.value as deleted %}
      <div class="class_entry">
        <h3 class="class_entry_header">{{ form.name.value|default:"" }}</h3>
        <div class="class_entry_body">
          {{ form.non_field_errors }}
          <table>
            <tr>
              <th>{{ form.name.label }}({% trans "LogExt: required" %})</th>
              <td>{% if not deleted %}{{ form.name.errors }}{% endif %}
                  {{ form.name }}</td>
            </tr>
            <tr>
              <th>{% trans "LogExt: Access Timestamp" %}({% trans "LogExt: required" %})</th>
              <td class="class_period_cell">
                <div>
                  <div>
                    {% if not deleted %}{{ form.ts_days.errors }}{% endif %}
                    <div class="class_daylist">{{ form.ts_days }}</div>
                  </div>
                  <br/>
                  <br/>
                  <br/>
                  <div>
                    {% if not deleted %}{{ form.ts_time1.errors }}{{ form.ts_time2.errors }}{% endif %}
                    <div class="class_timerange">{{ form.ts_time1 }}{% trans "LogExt: -" %}{{ form.ts_time2 }}</div>
                  </div>
                </div>
                <label>{{ form.ts_not }}{{ form.ts_not.label }}</label>
              </td>
            </tr>
            <tr>
              <th>{{ form.usernamelist.label }}({% trans "LogExt: required" %})</th>
              <td class="class_username_cell">
                {% if not deleted %}{{ form.usernamelist_all.errors }}{{ form.usernamelist.errors }}{% endif %}
                <input class="searchbox" type="text"/>
                <div class="mcbselect">
                  <label for="{{ form.usernamelist_all.auto_id }}">{{ form.usernamelist_all }}{{ form.usernamelist_all.label }}</label>
                  {% for cb in form.usernamelist %}
                    {{ cb.render }}
                  {% endfor %}
                </div>
                <label>{{ form.usernamelist_not }}{{ form.usernamelist_not.label }}</label>
              </td>
            </tr>
            <tr>
              <th>{{ form.hostname.label }}</th>
              <td>{% if not deleted %}{{ form.hostname.errors }}{% endif %}
                  {{ form.hostname }}<label>{{ form.hostname_not }}{{ form.hostname_not.label }}</label></td>
            </tr>
            <tr>
              <th>{{ form.ipaddress.label }}</th>
              <td>{% if not deleted %}{{ form.ipaddress.errors }}{% endif %}
                  {{ form.ipaddress }}<label>{{ form.ipaddress_not }}{{ form.ipaddress_not.label }}</label></td>
            </tr>
            <tr>
              <th>{{ form.operation.label }}({% trans "LogExt: required" %})</th>
              <td>{% if not deleted %}{{ form.operation.errors }}{% endif %}
                  <div class="class_operationlist">{{ form.operation }}</div></td>
            </tr>
            <tr>
              <th>{{ form.result.label }}</th>
              <td>{% if not deleted %}{{ form.result.errors }}{% endif %}
                  {{ form.result }}</td>
            </tr>
            <tr>
              <th>{{ form.sharename.label }}</th>
              <td>{% if not deleted %}{{ form.sharename.errors }}{% endif %}
                  {{ form.sharename }}</td>
            </tr>
            <tr>
              <th>{{ form.path.label }}</th>
              <td>{% if not deleted %}{{ form.path.errors }}{% endif %}
                  {{ form.path }}</td>
            </tr>
          </table>
        </div>
        <div class="class_entry_button class_del_entry_button">
          <div><label>{{ form.DELETE }}</label></div>
        </div>
      </div>
      {% endwith %}
    {% endfor %}
    <div id="id_blank_entry" class="class_entry class_blank_entry">
      <h3 class="class_entry_header"></h3>
      <div id="id_addform" class="class_entry_button class_add_entry_button"><div><label></label></div></div>
    </div>
  </div>

  <input id="id_apply"
         class="mbtn"
         type="submit"
         name="apply"
         onclick="parent.wait.start()"
         value="{% trans "Apply" %}" />
</div>
{% endblock function %}