<div class="extended-merge overlay">
	<div class="overlay-title">
		<h4>{{ phrase('agent.tickets.merge_ticket') }}</h4>
	</div>

	<div class="overlay-content">
		{% if other_ticket and other_ticket.id == ticket.id %}
			{{ phrase('agent.tickets.error_merge_with_self') }}
		{% else %}
			<form>
				<div
					class="ticket-finder"
					data-element-handler="DeskPRO.Agent.ElementHandler.TicketSearchBox"
					data-search-url="{{ path('agent_ticketsearch_quicksearch', {'format': 'json', 'limit': 10}) }}"
					data-highlight-term="1"
					data-touch-focus="1"
					data-search-param="term"
				>
					<script type="text/x-deskpro-tmpl" class="ticket-row-tpl">
						<li><a>
							<span class="ticket-id pill">1234</span>
							<span class="ticket-subject"></span>
							<div class="right">
								<div class="status-pill ticket-status"></div>
								<time class="ticket-time"></time>
							</div>
						</a></li>
					</script>
					<div class="input-wrapper">
						<input type="text" style="width: 98%" class="term" placeholder="{{ phrase('agent.tickets.find_ticket') }}" class="user-input" />
					</div>
					<input type="hidden" name="ticket_id" class="ticket-id" value="" />
					<div class="ticket-search-box person-search-box" style="display: none">
						<section>
							<ul class="results-list">

							</ul>
						</section>
					</div>
				</div>
			</form>

			{% if other_ticket %}
				<div class="merge-data-wrap">
					<table class="merge-data" width="100%">
						<tbody>
							<tr class="header-row">
								<td class="first">&nbsp;</td>
								<td colspan="2"><div class="switcher-wrap">
									<div class="left-text merge-target-button" data-merge-id="{{ ticket.id }}" data-keep="1">{{ phrase('agent.general.merge_keep_this') }}</div>
									<button class="switch-trigger clean-white" style="margin-top: 1px;">&lsaquo; {{ phrase('agent.general.merge_switch_btn') }} &rsaquo;</button>
									<div class="right-text merge-target-button" data-merge-id="{{ other_ticket.id }}">{{ phrase('agent.general.merge_merge_this') }}</div>
								</div></td>
							</tr>
						</tbody>
						<tbody class="merge-data-rows">
							<tr class="always-keep">
								<th nowrap="nowrap"><div>{{ phrase('agent.general.id') }}</div></th>
								<td width="50%">{{ ticket.id }}</td>
								{% if other_ticket %}<td width="50%">{{ other_ticket.id }}</td>{% endif %}
							</tr>
							<tr class="always-keep">
								<th nowrap="nowrap"><div>{{ phrase('agent.general.subject') }}</div></th>
								<td width="50%">
									<div style="max-width: 325px; text-overflow: ellipsis; display: block; overflow: hidden; white-space: nowrap;">{{ ticket.subject }}</div>
								</td>
								{% if other_ticket %}
									<td width="50%">
										<div style="max-width: 325px; text-overflow: ellipsis; display: block; overflow: hidden; white-space: nowrap;">{{ other_ticket.subject }}</div>
									</td>
								{% endif %}
							</tr>
							<tr class="always-keep">
								<th nowrap="nowrap"><div>{{ phrase('agent.general.person') }}</div></th>
								<td width="50%">{{ ticket.person.name }}</td>
								{% if other_ticket %}<td width="50%">{{ other_ticket.person.name }}</td>{% endif %}
							</tr>
							<tr class="always-keep">
								<th nowrap="nowrap"><div>{{ phrase('agent.general.date_created') }}</div></th>
								<td width="50%">{{ ticket.date_created|date('fulltime') }}</td>
								{% if other_ticket %}<td width="50%">{{ other_ticket.date_created|date('fulltime') }}</td>{% endif %}
							</tr>
							<tr>
								<th nowrap="nowrap"><div>{{ phrase('agent.general.department') }}</div></th>
								<td width="50%">{{ ticket.department ? ticket.department.full_title : '' }}</td>
								{% if other_ticket %}
									<td width="50%">{{ other_ticket.department ? other_ticket.department.full_title : '' }}</td>
								{% endif %}
							</tr>
							<tr class="always-keep">
								<th nowrap="nowrap"><div>{{ phrase('agent.general.status') }}</div></th>
								<td width="50%">{{ phrase('agent.tickets.status_' ~ ticket.status) }}</td>
								{% if other_ticket %}<td width="50%">{{ phrase('agent.tickets.status_' ~ other_ticket.status) }}</td>{% endif %}
							</tr>
							{% if ticket.urgency and other_ticket.urgency and ticket.urgency != other_ticket.urgency %}
								<tr class="always-keep">
									<th nowrap="nowrap"><div>{{ phrase('agent.general.urgency') }}</div></th>
									<td width="50%">{{ ticket.urgency }}</td>
									{% if other_ticket %}<td width="50%">{{ other_ticket.urgency }}</td>{% endif %}
								</tr>
							{% endif %}
							{% if ticket.language or other_ticket.language %}
								<tr>
									<th nowrap="nowrap"><div>{{ phrase('agent.general.language') }}</div></th>
									<td width="50%">{{ ticket.language ? ticket.language.title : '' }}</td>
									{% if other_ticket %}
										<td width="50%">{{ other_ticket.language ? other_ticket.language.title : '' }}</td>
									{% endif %}
								</tr>
							{% endif %}
							{% if ticket.category or other_ticket_category %}
								<tr>
									<th nowrap="nowrap"><div>{{ phrase('agent.general.category') }}</div></th>
									<td width="50%">{{ ticket.category ? ticket.category.title : '' }}</td>
									{% if other_ticket %}
										<td width="50%">{{ other_ticket.category ? other_ticket.category.title : '' }}</td>
									{% endif %}
								</tr>
							{% endif %}
							{% if ticket.priority or other_ticket.priority%}
								<tr>
									<th nowrap="nowrap"><div>{{ phrase('agent.general.priority') }}</div></th>
									<td width="50%">{{ ticket.priority ? ticket.priority.title : '' }}</td>
									{% if other_ticket %}
										<td width="50%">{{ other_ticket.priority ? other_ticket.priority.title : '' }}</td>
									{% endif %}
								</tr>
							{% endif %}
							{% if ticket.product or other_ticket.product %}
								<tr>
									<th nowrap="nowrap"><div>{{ phrase('agent.general.product') }}</div></th>
									<td width="50%">{{ ticket.product ? ticket.product.title : '' }}</td>
									{% if other_ticket %}
										<td width="50%">{{ other_ticket.product ? other_ticket.product.title : '' }}</td>
									{% endif %}
								</tr>
							{% endif %}
							{% if ticket.workflow or other_ticket.workflow %}
								<tr>
									<th nowrap="nowrap"><div>{{ phrase('agent.general.workflow') }}</div></th>
									<td width="50%">{{ ticket.workflow ? ticket.workflow.title : '' }}</td>
									{% if other_ticket %}
										<td width="50%">{{ other_ticket.workflow ? other_ticket.workflow.title : '' }}</td>
									{% endif %}
								</tr>
							{% endif %}
							{% for k,f in custom_fields %}
								{% if f.hasValue or other_custom_fields[k].hasValue %}
									<tr>
										<th nowrap="nowrap"><div>{{ f.title }}</div></th>
										<td width="50%">{% if f.hasValue %}{{ render_custom_field(f) }}{% endif %}</td>
										{% if other_ticket %}
											<td width="50%">{% if other_custom_fields[k].hasValue %}{{ render_custom_field(other_custom_fields[k]) }}{% endif %}</td>
										{% endif %}
									</tr>
								{% endif %}
							{% endfor %}
							{% if ticket.labels is not empty or other_ticket.labels is not empty %}
								<tr class="mergeable">
									<th nowrap="nowrap"><div>{{ phrase('agent.general.label') }}</div></th>
									<td width="50%">
										{% if ticket.labels is not empty %}
											<ul>
												{% for label in ticket.labels %}
													<li>{{ label.label }}</li>
												{% endfor %}
											</ul>
										{% endif %}
									</td>
									{% if other_ticket %}
										<td width="50%">
											{% if other_ticket.labels is not empty %}
												<ul>
													{% for label in other_ticket.labels %}
														<li>{{ label.label }}</li>
													{% endfor %}
												</ul>
											{% endif %}
										</td>
									{% endif %}
								</tr>
							{% endif %}
						</tbody>
					</table>
				</div>
			{% endif %}
		</div>
	{% endif %}
	{% if other_ticket %}
		<div class="overlay-footer">
			<div class="is-not-loading">
				<button class="clean-white merge-trigger">{{ phrase('agent.tickets.merge_submit_btn') }}</button>
			</div>
			<div class="is-loading">
				<div class="loading-icon"></div>
			</div>
		</div>
	{% endif %}
</div>