{% INCLUDE 'overall_header.html' %}

    <!-- Prism -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-okaidia.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/line-numbers/prism-line-numbers.min.css" />
    <style type="text/css">
        html {
            font-size: 13px;
        }
        .token.coord {
            color: #6cf;
        }
        .token.diff.bold {
            color: #fb0;
            font-weight: normal;
        }

        .diff-wrapper.diff {
  --tab-size: 4;
  background: repeating-linear-gradient(-45deg, whitesmoke, whitesmoke 0.5em, #e8e8e8 0.5em, #e8e8e8 1em);
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid black;
  color: black;
  empty-cells: show;
  font-family: monospace;
  font-size: 13px;
  width: 100%;
  word-break: break-all;
}
.diff-wrapper.diff th {
  font-weight: 700;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.diff-wrapper.diff td {
  vertical-align: baseline;
}
.diff-wrapper.diff td,
.diff-wrapper.diff th {
  border-collapse: separate;
  border: none;
  padding: 1px 2px;
  background: #fff;
}
.diff-wrapper.diff td:empty:after,
.diff-wrapper.diff th:empty:after {
  content: " ";
  visibility: hidden;
}
.diff-wrapper.diff td a,
.diff-wrapper.diff th a {
  color: #000;
  cursor: inherit;
  pointer-events: none;
}
.diff-wrapper.diff thead th {
  background: #a6a6a6;
  border-bottom: 1px solid black;
  padding: 4px;
  text-align: left;
}
.diff-wrapper.diff tbody.skipped {
  border-top: 1px solid black;
}
.diff-wrapper.diff tbody.skipped td,
.diff-wrapper.diff tbody.skipped th {
  display: none;
}
.diff-wrapper.diff tbody th {
  background: #cccccc;
  border-right: 1px solid black;
  text-align: right;
  vertical-align: top;
  width: 4em;
}
.diff-wrapper.diff tbody th.sign {
  background: #fff;
  border-right: none;
  padding: 1px 0;
  text-align: center;
  width: 1em;
}
.diff-wrapper.diff tbody th.sign.del {
  background: #fbe1e1;
}
.diff-wrapper.diff tbody th.sign.ins {
  background: #e1fbe1;
}
.diff-wrapper.diff.diff-html {
  white-space: pre-wrap;
  tab-size: var(--tab-size);
}
.diff-wrapper.diff.diff-html .ch {
  line-height: 1em;
  background-clip: border-box;
  background-repeat: repeat-x;
  background-position: left center;
}
.diff-wrapper.diff.diff-html .ch.sp {
  background-image: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.5 11C4.5 10.1716 5.17157 9.5 6 9.5C6.82843 9.5 7.5 10.1716 7.5 11C7.5 11.8284 6.82843 12.5 6 12.5C5.17157 12.5 4.5 11.8284 4.5 11Z" fill="rgba%2860, 60, 60, 50%25%29"/%3E%3C/svg%3E');
  background-size: 1ch 1.25em;
}
.diff-wrapper.diff.diff-html .ch.tab {
  background-image: url('data:image/svg+xml,%3Csvg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M9.5 10.44L6.62 8.12L7.32 7.26L12.04 11V11.44L7.28 14.9L6.62 13.9L9.48 11.78H0V10.44H9.5Z" fill="rgba%2860, 60, 60, 50%25%29"/%3E%3C/svg%3E');
  background-size: calc(var(--tab-size) * 1ch) 1.25em;
  background-position: 2px center;
}
.diff-wrapper.diff.diff-html .change.change-eq .old,
.diff-wrapper.diff.diff-html .change.change-eq .new {
  background: #fff;
}
.diff-wrapper.diff.diff-html .change .old {
  background: #fbe1e1;
}
.diff-wrapper.diff.diff-html .change .new {
  background: #e1fbe1;
}
.diff-wrapper.diff.diff-html .change .rep {
  background: #fef6d9;
}
.diff-wrapper.diff.diff-html .change .old.none,
.diff-wrapper.diff.diff-html .change .new.none,
.diff-wrapper.diff.diff-html .change .rep.none {
  background: transparent;
  cursor: not-allowed;
}
.diff-wrapper.diff.diff-html .change ins,
.diff-wrapper.diff.diff-html .change del {
  font-weight: bold;
  text-decoration: none;
}
.diff-wrapper.diff.diff-html .change ins {
  background: #94f094;
}
.diff-wrapper.diff.diff-html .change del {
  background: #f09494;
}

.glacier-collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 4px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  border-radius: 10px 10px 0 0;
}

.glacier-collapsible-legend {
  background-color: #777;
  color: white;
  padding: 4px;
  width: 110px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  border-radius: 10px 10px 0 0;
}

.glacier-active, .glacier-collapsible:hover {
  background-color: #555;
}

.glacier-collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.glacier-active:after {
  content: "\2212";
}

.glacier-content {
  padding: 2px 10px 6px 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border-radius: 0 0 10px 10px;
}

.glacier-content-legend {
  padding: 4px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border-radius: 0 0 10px 10px;
  width: 110px;
}

.glacier-insert {
  background-color: #94f094;
}
.glacier-delete {
  background-color: #f09494;
}
.glacier-new_file {
  background-color: #fff176;
}
.glacier-file_deleted {
  background-color: #d32f2f;
}
.glacier-mix {
  background: repeating-linear-gradient( -45deg, #f09494 0px, #f09494 20px, #94f094 21px, #94f094 41px, #f09494 42px);
  background-size: 100% 100%;
}
.glacier-other {
  background-color: #cccccc;
}

</style>




<h1>{{ lang('ACP_PHPBB_COMPARE_PROCESS') }}</h1>
	
<form id="acp_board" method="post" action="{{ U_ACTION }}"  >	
	<fieldset id="process_compare" >
		<legend>{{ lang('ACP_PHPBB_COMPARE_PROCESS_SECTION') }}</legend>			
		<dl>
			<dt>
				<label for="phpbb_compare_process_compare">{{ lang('ACP_PHPBB_COMPARE_PROCESS_COMPARISON') ~ lang('COLON') }} </label>
			</dt>
			<dd>
				<input class="button1" type="submit" name="submitProcess" value="{{ lang('SUBMIT_PROCESS') }}">
			</dd>
		</dl>
	</fieldset>
</form>		
	
<h1>{{ lang('DIFF_RESULTS') }} - {{ PHPBB_COMPARE_SOURCE_PATH }} - {{ PHPBB_COMPARE_RESULT_DATE }}</h1>

<fieldset id="legend" >
	<legend>{{ lang('ACP_PHPBB_COMPARE_LEGEND') }}</legend>			
	<div>
	<div style="float: left; margin: 2px;">
		<div class="glacier-collapsible-legend">{{ lang('ACP_PHPBB_COMPARE_ADDED') }}:<br> &nbsp;&nbsp;{{ TOTALS_INSERTED }}</div>
		<div class="glacier-content-legend glacier-insert"></div>
		<div style="height: 6px;"></div>
	</div>
	<div style="float: left; margin: 2px;">	
		<div class="glacier-collapsible-legend">{{ lang('ACP_PHPBB_COMPARE_DELETED') }}:<br> &nbsp;&nbsp;{{ TOTALS_DELETED }}</div>
		<div class="glacier-content-legend glacier-delete"></div>
		<div style="height: 6px;"></div>
	</div>
	<div style="float: left; margin: 2px;">		
		<div class="glacier-collapsible-legend">{{ lang('ACP_PHPBB_COMPARE_CHANGED') }}:<br> &nbsp;&nbsp;{{ TOTALS_MIXED }}</div>
		<div class="glacier-content-legend glacier-mix"></div>
		<div style="height: 6px;"></div>
	</div>
	<div style="float: left; margin: 2px;">		
		<div class="glacier-collapsible-legend">{{ lang('ACP_PHPBB_COMPARE_NEW_FILE') }}:<br> &nbsp;&nbsp;{{ TOTALS_NEW_FILE }}</div>
		<div class="glacier-content-legend glacier-new_file"></div>
		<div style="height: 6px;"></div>
	</div>	
	<div style="float: left; margin: 2px;">		
		<div class="glacier-collapsible-legend">{{ lang('ACP_PHPBB_COMPARE_FILE_DELETED') }}:<br> &nbsp;&nbsp;{{ TOTALS_FILE_DELETED }}</div>
		<div class="glacier-content-legend glacier-file_deleted"></div>
		<div style="height: 6px;"></div>
	</div>	
	<div style="float: left; margin: 2px;">
		<div class="glacier-collapsible-legend" style="width: 130px">{{ lang('ACP_PHPBB_COMPARE_NO_CHANGE') }}: <br> &nbsp;&nbsp;{{ TOTALS_NOCHANGE }} <span style="font-size: 11px; float: right;">({{ lang('ACP_PHPBB_COMPARE_NOT_SHOWN') }})</span></div>
		<div class="glacier-content-legend glacier-other" style="width: 130px"></div>
		<div style="height: 6px;"></div>
	</div>
	<div style="float: left; margin: 2px;">	
		<div class="glacier-collapsible-legend">{{ lang('ACP_PHPBB_COMPARE_UNKNOWN') }}:<br> &nbsp;&nbsp;{{ TOTALS_UNKNOWN }}</div>
		<div class="glacier-content-legend glacier-other"></div>
		<div style="height: 6px;"></div>
	</div>
	<div style="float: left; margin: 2px;">		
		<div class="glacier-collapsible-legend" style="width: 120px">{{ lang('ACP_PHPBB_COMPARE_TOTAL') }}:<br> &nbsp;&nbsp;{{ TOTALS_TOTAL }}</div>
		<div class="glacier-content-legend glacier-other" style="width: 120px"></div>
		<div style="height: 6px;"></div>
	</div>
	</div>	
</fieldset>


	{% for single in phpbb_compare %}
		<button class="glacier-collapsible">{{ single.FILENAME }}</button>	
		<div class="glacier-content {% if single.DIFF_TYPE == 0 %} glacier-delete {% elseif single.DIFF_TYPE == 1 %} glacier-insert {% elseif single.DIFF_TYPE == 2 %} glacier-mix {% elseif single.DIFF_TYPE == 3 %} glacier-new_file {% elseif single.DIFF_TYPE == 4 %} glacier-file_deleted {% endif %}">
		<div style="height: 6px;"></div>
		
		
		<table class="diff-wrapper diff diff-html diff-side-by-side">
	    <thead>
	    <tr>
	    <th colspan="4"><b>[Mime Type: {{ single.FILE_TYPE }}] [File Size: {{ single.FILE_SIZE }}] [Last Mod: {{ single.LAST_MOD }}]</th>
	    </tr>
	    </thead>
	    </table>
		
		{{ single.DIFF }}
		</div>
		<div style="height: 3px;"></div>
	{% endfor %}	



    <!-- Prism -->
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-diff.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-json.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script>
var coll = document.getElementsByClassName("glacier-collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("glacier-active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

{% INCLUDE 'overall_footer.html' %}