{#
	Main template for the Related Content metaboxes.

	@since m2m
#}

{% extends "@toolset/listing.twig" %}

{# we need its macros #}
{% import "@toolset/listing.twig" as listing %}


{% import _self as related %}


{% block columnHeaders %}
	{{ listing.columnHeader( __( 'Title', 'wpcf' ), true, 'displayName', 'column-post-field column-title column-primary') }}
	{% for column in columns.relatedPosts %}
		{{ listing.columnHeader(column['displayName'], false, column['slug'], 'column-post-field toolset-field-' ~ column['fieldType'], column['fieldType'] == 'numeric' ? 'numeric' : 'alpha', "visible: isFieldVisible('relatedPosts', '" ~ column['slug'] ~ "')" ) }}
	{% endfor %}
	{% for column in columns.post %}
		{{ listing.columnHeader(column['displayName'], true, column['slug'], 'column-post-field toolset-field-' ~ column['fieldType'], column['fieldType'] == 'numeric' ? 'numeric' : 'alpha', "visible: isFieldVisible('post', '" ~ column['slug'] ~ "')" ) }}
	{% endfor %}
	<!-- ko if: (itemCount() > 0 && hasLangInfo() && isIPTTranslatable()) -->
	<th class="column-relationship-field"><i class="fa fa-question-circle icon-question-sign js-show-tooltip" data-header="{{ __( 'Intermediary post', 'wpcf' ) }}" data-content='{{ __( 'Intermediary post might be translated in a different language.', 'wpcf' ) }}' data-bind="click: showPointer($element)"></i></th>
	<!-- /ko -->
	{% for column in columns.relationship %}
		{{ listing.columnHeader(column['displayName'], true, column['slug'], ' toolset-field-' ~ column['fieldType'], column['fieldType'] == 'numeric' ? 'numeric' : 'alpha', "visible: isFieldVisible('relationship', '" ~ column['slug'] ~ "'), css: { 'column-relationship-field': isFieldVisible('relationship', '" ~ column['slug'] ~ "') }" ) }}
	{% endfor %}
{% endblock %}

{% block actualContentWrapper %}
	<div data-bind="afterBinding: content, template: {afterRender: wpcfVanillaFormValidation }" class="types-related-content clearfix">
		<div class="types-related-content-actions alignright">
			<span class="spinner" data-bind="style: { visibility: (isMainSpinnerVisible() ? 'visible' : 'hidden') }" style="visibility: hidden;"></span>
			<!-- ko if: userCaps.publish_posts -->
			<input type="button" class="button" value="{{ strings.misc.addNew }}" data-bind="click: onAddNewRelatedContent, enable: canConnectAnotherElement" />
			<input type="button" class="button" value="{{ strings.misc.connectExisting }}" data-bind="click: onConnectExistingRelatedContent, enable: canConnectAnotherElement" />
			<!-- /ko -->
			<button class="button" data-bind="click: onSelectFieldsDisplayed" ><i class="fa fa-cog" ></i></button>
			<i class="fa fa-question-circle icon-question-sign js-show-tooltip" data-header="{{ __( 'Related content', 'wpcf' ) }}" data-content='{{ __( 'No more associations are allowed', 'wpcf' ) }}' data-bind="click: function() {showPointer($element)}, visible: !canConnectAnotherElement() && !isOnlyOneRelatedConection()"></i>
		</div>
		<div data-bind="visible: isMainTableVisible, css: mainTableStyle()">
			{{ parent() }}
		</div>
	</div>
{% endblock %}


{# Overwrites/Delete #}
{% block tablenavTop %}
	<div class="types-related-content-table-wrapper">
{% endblock %}

{% block tablenavBottom %}
	</div>
	{{ parent() }}
{% endblock %}

{% block bottomPagination %}
	{{ parent() }}
	<span class="spinner" data-bind="style: { visibility: (isMainSpinnerVisible() ? 'visible' : 'hidden') }" style="visibility: hidden;"></span>
{% endblock %}

{% block bulkActions %}
{% endblock %}

{% block searchBox %}
{% endblock %}

{% block checkboxColumnHeader %}
{% endblock %}

{% block checkboxCell %}
{% endblock %}

{% block tbodyNoItems %}
	<tbody>
		<tr>
			<td colspan="100">{{ strings.misc.noItemsFound|e }}</td>
		</tr>
	</tbody>
{% endblock %}

{# Needs to be overriden because edit link must be able to open in another window #}
{% block mainCell %}
	<td class="column-post-field">
		<span class="spinner" data-bind="style: { visibility: (isSpinnerVisible() ? 'visible' : 'hidden') }"></span>

		<a data-bind="html: flag() + displayName(), attr: {href: editPostLink()}"></a>
		{% block afterDisplayName %}{% endblock %}

		<div class="row-actions">
			<!-- ko if: canUserEditPost -->
			<span class="edit">
				<a data-bind="attr: {href: editPostLink()}">{{ __( 'Edit', 'wpcf' ) }}</a> |
			</span>
			<span class="edit">
				<a data-bind="click: showQuickEdit">{{ __( 'Quick Edit', 'wpcf' ) }}</a> |
			</span>
			<span class="edit">
				<a data-bind="click: onDisconnectAction">{{ __( 'Disconnect', 'wpcf' ) }}</a> |
			</span>
			<!-- /ko -->
			<!-- ko if: canUserDeletePost -->
			<span class="delete">
				<a data-bind="click: onDeleteAction">{{ __( 'Trash', 'wpcf' ) }}</a>
			</span>
			<!-- /ko -->
		</div>
	</td>
{% endblock %}

{% block colgroup %}
<colgroup>
	<col span="{{ columns.post|length }}" class="types-column-split types-ipt-fields-{{ columns.relationship|length }}" />
	<col span="{{ columns.relationship|length }}" />
</colgroup>
{% endblock %}

{# Other table cells besides the main one (with displayName and row actions) #}
{% block tdCells %}
	{% for column in columns.relatedPosts %}
		<td class="column-related-post-field" data-colname="{{ column['displayName'] }}" data-bind="html: displayFieldValue('relatedPosts', '{{ column['slug'] | raw }}'), visible: isFieldVisible('relatedPosts', '{{ column['slug'] | raw }}')" class="types-relationship-type-post"></td>
	{% endfor %}
	{% for column in columns.post %}
		<td class="column-post-field" data-colname="{{ column['displayName'] }}" data-bind="html: displayFieldValue('post', '{{ column['slug'] | raw }}'), visible: isFieldVisible('post', '{{ column['slug'] | raw }}')" class="types-relationship-type-post"></td>
	{% endfor %}
	<!-- ko if: ($parent.itemCount() > 0 && $parent.hasLangInfo() && $parent.isIPTTranslatable()) -->
	<td class="column-relationship-field" data-bind="html: fieldsFlag"></td>
	<!-- /ko -->
	{% for column in columns.relationship %}
		<td class="types-relationship-type-relationship" data-colname="{{ column['displayName'] }}"  data-bind="html: displayFieldValue('relationship', '{{ column['slug'] | raw }}'), visible: isFieldVisible('relationship', '{{ column['slug'] | raw }}'), css: {'column-relationship-field': isFieldVisible('relationship', '{{ column['slug'] | raw }}')}" ></td>
	{% endfor %}
	<tr class="hidden">
		<td colspan="{{ columns.post|length + columns.relatedPosts|length + columns.relationship|length + 2 }}">
			<div id="message" data-bind="threeModeVisibility: messageVisibilityMode, attr: { class: 'notice is-dismissible ' + messageNagClass() }">
				<p data-bind="html: displayedMessage().text"></p>
				<button class="notice-dismiss" data-bind="click: removeDisplayedMessage"></button>
			</div>
			<div data-bind="attr: {id: relatedContentFormID()}">
				<div class="types-quick-edit-fields">
					<input type="hidden" name="association_uid" data-bind="value: relatedContentAssociationUID()" />
					<input type="hidden" name="post_id" data-bind="value: relatedContentPostId()" />
					<input type="hidden" name="role" data-bind="value: relatedContentRole()" />
					<div class="types-quick-edit-fields-block" rel="post">
								<h3 class="types-quick-edit-header" data-bind="text: postFieldsTitle(), visible: displayEditFields('relationship')"></h3>
								<div class="notice notice-warning inline types-warning">
									<p>{{ __( '<strong>WARNING!</strong> These fields belong to the related post!', 'wpcf' ) | raw }}</p>
									<p><input type="button" class="button" value="{{ __( 'Enable editing', 'wpcf' ) }}" data-bind="click: enablePostFields" > </p>
									<p><input type="checkbox" data-bind="attr: {id: warningLabelId() }"/> <label data-bind="attr: {for: warningLabelId() }">{{ __( 'Do not block these fields in the future', 'wpcf' ) }}</label></p>
								</div>
								{# Related post title #}
								<div class="js-wpt-field-items" data-bind="disableInputs: disable">
									<div class="js-wpt-field-item wpt-field-item">
										<div class="form-item form-item-textfield wpt-form-item wpt-form-item-textfield">
											<label class="wpt-form-label wpt-form-textfield-label" data-bind="attr: {for: postTitleId()}, text: postTitleLabel()"></label>
											<input name="wpcf[post][post-title]" class="wpt-form-textfield" type="text" data-bind="attr: {id: postTitleId(), value: postTitleValue()}">
										</div>
									</div>
								</div>
								<div class="types-quick-edit-fields-post" data-bind="html: displayEditFields('post'), disableInputs: disable, updateRadioNames: relatedContentAssociationUID()" data-related="post"></div>
					</div>
					<div class="types-quick-edit-fields-block" data-bind="visible: hasRelationshipFields()" rel="relationship">
								<h3 class="types-quick-edit-header" >{{ __( 'Relationship fields', 'wpcf' ) }}</h3>
								<div class="types-quick-edit-fields-relationship" data-bind="html: displayEditFields('relationship'), updateRadioNames: relatedContentAssociationUID()" data-related="relatoinship"></div>
					</div>
					<footer class="types-quick-edit-fields-actions">
						<input type="button" class="button" value="{{ __( 'Cancel', 'wpcf' ) }}" data-bind="click: onCancelQuickEdit" />
						<input type="button" class="button button-primary alignright" value="{{ __( 'Update', 'wpcf' ) }}" data-bind="click: onUpdateQuickEdit" />
						<span class="spinner"></span>
					</footer>
				</div>
			</div>
		</td>
	</tr>
{% endblock %}
