<div class="jet-apb-workflow__item">
	<div class="jet-apb-workflow__item-header">
		<div class="jet-apb-workflow__item-remove-wrap">
			<div class="jet-apb-workflow__item-remove" @click="confirmDel = ! confirmDel">
				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M2.28564 14.192V3.42847H13.7142V14.192C13.7142 14.6685 13.5208 15.0889 13.1339 15.4533C12.747 15.8177 12.3005 15.9999 11.7946 15.9999H4.20529C3.69934 15.9999 3.25291 15.8177 2.866 15.4533C2.4791 15.0889 2.28564 14.6685 2.28564 14.192Z"></path><path d="M14.8571 1.14286V2.28571H1.14282V1.14286H4.57139L5.56085 0H10.4391L11.4285 1.14286H14.8571Z"></path>
				</svg>
			</div>
			<div class="cx-vui-tooltip" v-if="confirmDel">
				<?php esc_html_e( 'Are you sure?', 'jet-appointments-booking' ); ?>
				<br>
				<span class="cx-vui-repeater-item__confrim-del" @click="onDelete()"><?php esc_html_e( 'Yes', 'jet-appointments-booking' ); ?></span>
				/
				<span class="cx-vui-repeater-item__cancel-del" @click="confirmDel = false"><?php esc_html_e( 'No', 'jet-appointments-booking' ); ?></span>
			</div>
		</div>
	</div>
	<cx-vui-select
		label="<?php esc_html_e( 'Event', 'jet-appointments-booking' ); ?>"
		description="<?php esc_html_e( 'Select event to trigger a workflow item', 'jet-appointments-booking' ); ?>"
		:options-list="events"
		:wrapper-css="[ 'equalwidth' ]"
		size="fullwidth"
		:value="item.event"
		@input="updateItem( $event, 'event' )"
	/>
	<?php do_action( 'jet-apb/workflows/event-controls' ); ?>
	<cx-vui-select
		label="<?php esc_html_e( 'Start', 'jet-appointments-booking' ); ?>"
		description="<?php esc_html_e( 'Select when start to run current workflow', 'jet-appointments-booking' ); ?>"
		:options-list="schedule"
		:wrapper-css="[ 'equalwidth' ]"
		size="fullwidth"
		:value="item.schedule"
		@input="updateItem( $event, 'schedule' )"
	/>
	<cx-vui-input
		type="number"
		:label="isBefore() 
			? '<?php esc_html_e( 'Days before', 'jet-appointments-booking' ); ?>'
            : isAfter() 
				? '<?php esc_html_e( 'Days after', 'jet-appointments-booking' ); ?>'
				: ''
		"
		:description="isBefore()
        	? '<?php esc_html_e( 'Run this item in selected number of days before appointment date. Set to 0 to enable triggering the event less than 24 hours before the appointment. Ensure the number of hours is specified in the \"Hours before\" field.', 'jet-appointments-booking' ); ?>'
        	: isAfter()
				? '<?php esc_html_e( 'Run this item in selected number of days after appointment date. Set to 0 to enable triggering the event less than 24 hours after the appointment. Ensure the number of hours is specified in the \"Hours after\" field.', 'jet-appointments-booking' ); ?>'
				: ''
		"
		:wrapper-css="[ 'equalwidth' ]"
		size="fullwidth"
		min="0"
		max="15"
		:value="item.hours_schedule == 0 && item.days_schedule == 0 ? 1 : item.days_schedule"
		v-if="isBefore() || isAfter()"
		@input="updateItem( $event, 'days_schedule' )"
	/>
	<cx-vui-input
		type="number"
		:label="isBefore() 
			? '<?php esc_html_e( 'Hours before', 'jet-appointments-booking' ); ?>'
			: isAfter()
				? '<?php esc_html_e( 'Hours after', 'jet-appointments-booking' ); ?>'
				: ''
		"
		:description="isBefore()
        	? '<?php esc_html_e( 'Run this item in selected number of hours before appointment date.', 'jet-appointments-booking' ); ?>'
        	: isAfter() 
				? '<?php esc_html_e( 'Run this item in selected number of hours after appointment date.', 'jet-appointments-booking' ); ?>'
				: ''
		"
		:wrapper-css="[ 'equalwidth' ]"
		size="fullwidth"
		min="0"
		max="23"
		:value="item.hours_schedule"
		v-if="isBefore() || isAfter()"
		@input="updateItem( $event, 'hours_schedule' )"
	/>
	<cx-vui-component-wrapper
		v-if="item.hours_schedule > 0"
	><span style="color:#23282;"><?php 
		esc_html_e( 'On low-traffic sites, the event might run later than scheduled due to infrequent site activity.', 'jet-appointments-booking' );
	?></span></cx-vui-component-wrapper>
	<cx-vui-switcher
		label="<?php esc_html_e( 'Prevent execution on Appointments group creation', 'jet-appointments-booking' ); ?>"
		description="<?php esc_html_e( 'Prevent the "Appointment Created" action from running when the appointment is part of a group', 'jet-appointments-booking' ); ?>"
		:wrapper-css="[ 'equalwidth' ]"
		v-if="'appointment-created' === item.event"
		:value="item.excluded_group"
		@input="updateItem( $event, 'excluded_group' )"
	/>
	<div class="cx-vui-inner-panel">
		<cx-vui-repeater
			button-label="<?php esc_html_e( '+ New Action', 'jet-appointments-booking' ); ?>"
			button-style="accent"
			button-size="mini"
			:value="item.actions"
			@input="updateActions( $event )"
			@add-new-item="addNewAction"
		>
			<cx-vui-repeater-item
					v-for="( action, actionIndex ) in item.actions"
					:title="getActionTitle( action )"
					:collapsed="isCollapsed( action )"
					:index="actionIndex"
					@clone-item="cloneAction( $event, actionIndex )"
					@delete-item="deleteAction( $event, actionIndex )"
					:key="action.hash"
			>
				<cx-vui-input
					label="<?php esc_html_e( 'Action name', 'jet-appointments-booking' ); ?>"
					description="<?php esc_html_e( 'Name of the action to visually identify it in the list', 'jet-appointments-booking' ); ?>"
					:wrapper-css="[ 'equalwidth' ]"
					size="fullwidth"
					:value="item.actions[ actionIndex ].title"
					@on-input-change="setActionProp( actionIndex, 'title', $event.target.value )"
				/>
				<cx-vui-select
					label="<?php esc_html_e( 'Action', 'jet-appointments-booking' ); ?>"
					description="<?php esc_html_e( 'Select action to run', 'jet-appointments-booking' ); ?>"
					:options-list="actions"
					:wrapper-css="[ 'equalwidth' ]"
					size="fullwidth"
					:value="item.actions[ actionIndex ].action_id"
					@input="setActionProp( actionIndex, 'action_id', $event )"
				/>
				<?php do_action( 'jet-apb/workflows/action-controls' ); ?>
			</cx-vui-repeater-item>
		</cx-vui-repeater>
	</div>
</div>