<!doctype html>
<html class="no-js" lang="en">
<head>
	<title>Localization: <txt name="loc_type_header"></txt></title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link type="text/css" href="/interface_default/css/bootstrap.min.css" media="all" rel="stylesheet" />
</head>

<body name="body-block">

<script type="text/javascript" src="/components/vendor.js"></script>
<script type="text/javascript" src="/components/core.js"></script>
<script type="text/javascript" src="/intranet/js/json2.js"></script>



<script type="text/javascript">
	var languages = <txt name='languages'></txt>;
	var data = <txt name='data'></txt>;
	var edit_mode = "<txt name='edit_mode'></txt>";
	var app = "<txt name='app'></txt>";
	var editable = <txt name="editable"></txt>;
</script>

<script>
	require(['/intranet/admin/utils/msg_editor/msg_edit.js']);
</script>

<style>
    body {
      background: #EDEDED;
      font-size: 11px;
    }

	* {
		-webkit-box-sizing: content-box;
		   -moz-box-sizing: content-box;
		        box-sizing: content-box;
	}

    .filter-container {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
    }

    .filter {
      border: 1px solid #ddd;
      padding: 9px;
    }

	#filter {
		margin: 0;
		padding: 2px;
		min-height: 22px;
	}

    #container {
      position: absolute;
      top: 48px;
      left: 0;
      right: 0;
      bottom: 50px;
	     background: white;
    }

    .actions-container {
    	position: fixed;
    	width: 100%;
      left: 0;
      bottom: 0;
      z-index: 1000;
    }

    .actions {
      padding: 8px;
      border-top: 1px solid #ccc;
	  text-align: center;
    }

    .contextMenu {
      background: #eee;
      border: 1px solid #ccc;
      padding: 2px;
      display: inline-block;
      min-width: 100px;
      -webkit-box-shadow: 1px 1px 7px rgba(0,0,0,0.3);
         -moz-box-shadow: 1px 1px 7px rgba(0,0,0,0.3);
              box-shadow: 1px 1px 7px rgba(0,0,0,0.3);
      z-index: 99999;
    }

    .contextMenu li {
      padding: 3px 4px;
      list-style: none;
      cursor: pointer;
    }

    .contextMenu li:hover {
      background-color: white;
    }

    .contextMenu .splitter {
      border-top: 1px solid #ccc;
      padding: 0;
    }

    .slick-row.active {
      /*background: #eee;*/
    }

	.slick-cell.selected {
		background: #eee;
	}

	#container .rowDeleted {
      background: #f2dede;
      color: #b94a48;
    }

    #container .rowChanged {
      background: #fcf8e3;
      color: #c09853;
    }

	.editor-text {
		width: 300px;
		min-height: 5px;
	}
</style>

<div id="filter-container" class="filter-container">
    <div class="filter">
      <input type="text" id="filter" size="50" class="form-control" name="filter" placeholder="Filter..." />
	  <input type="button" id="reset-filter" class="btn  btn-secondary" value="Show all">
    </div>
</div>

<ul id="contextMenu" class="contextMenu" style="display:none;position:absolute;z-index:9999">
  <li id="new-window">Edit in popup</li>
  <li id="context-delete">Delete</li>
  <li id="context-add">Add phrase</li>
  <li class="splitter"></li>
  <li id="restore-phrase">Restore this phrase</li>
  <li id="mark-modified">Mark as modified</li>
</ul>

<!--- slickgrid data is injected into this div -->
<div id="container"></div>

<div id="actions" name="actions" class="actions-container">
    <div class="actions">
    	<input type="button" id="saveButton" value="Save" class="btn btn-primary"  />
		<!-- <input type="submit" value="Cancel" class="btn btn-danger" />-->
    </div>
</div>

<!--- Template for the phrase popup window -->
<script type="text/template" id="popup-template">
<style type="text/css">
	input[type=text] { width: 100%; }
	table { width: 100%; font-size: 14px; }
	body {
		background: #EDEDED;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	}
</style>
<table>
<colgroup>
	<col width="100">
	<col>
</colgroup>
<tr>
	<td>Type</td>
	<td>
		<label for="typeLm">
			{{ if (data.type=='lm' || data.type=='' || data.type==undefined) { }}
				<input type="radio" name="type" id="typeLm" value="lm" checked="checked" />
			{{ } else { }}
				<input type="radio" name="type" id="typeLm" value="lm" />
			{{ } }} For PHP/JS (lm)
		</label>
		<label for="typeLt" style="margin-left: 20px">
			{{ if (data.type=='lt') { }}
				<input type="radio" name="type" id="typeLt" value="lt" checked="checked" />
			{{ } else { }}
				<input type="radio" name="type" id="typeLt" value="lt" />
			{{ } }} For template (lt)
		</label>
	</td>
</tr>

<tr>
	<td><label for="key">Key</label></td>
	<td><input type="text" id="key" value="{{- data.key }}" ></td>
</tr>

<tr>
	<td><label for="aux" title="Reference to existing message">Aux</label></td>
	<td><input type="text" id="aux" value="{{- data.aux }}" ></td>
</tr>

<tr>
	<td colspan="2">&nbsp;</td>
</tr>

{{ _.each(languages, function (lang_obj) {  }}
	<tr>
		<td><label for="input-{{= lang_obj.id }}">{{- lang_obj.name }}</label></td>
		<td><input type="text" id="input-{{= lang_obj.id }}" class="form-control" value="{{- data[lang_obj.id] }}" /></td>
	</tr>
{{ }); }}
</table>

<center style="padding-top: 20px">
<button id="saveBtn" class="btn btn-primary">Save</button>
</center>

</script>

</body>
</html>
