@push('css')
{{--	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">--}}
	<link rel="stylesheet" href="/css/scenario/modal-preview-all-step.css?v={{config('sns-line.version')}}">
{{--	<link rel="stylesheet" href="/css/template_v2/modal/broadcast.css?v={{config('sns-line.version')}}">--}}

	<style>

	</style>
@endpush
<template id="wrap-modal-preview-all-step" v-cloak>
	<div class="modal fade" id="modalPreviewAllStep"
		 tabindex="-1" role="dialog"
		 data-backdrop="static"
		 data-keyboard="false"
		 aria-labelledby="chatSettingStatus">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h2 class="font-weight-normal modal-title" style="padding-left: 10px">一括プレビュー</h2>
					<div class="filter_name">配信対象：友だち全員@{{ filter_name ? '・' + filter_name : ''}}のメッセージが含まれます</div>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
						<i class="fas fa-times" style="color:#7D9195; background-color: unset; position: relative;"></i>
					</button>
				</div>
				<div class="modal-body">
					<div class="wrap-content">
						<div class="send-test">
							<div class="wrap-list-step">
								<table class="table">
									<thead>
										<tr>
											<th style="width: 125px; text-align: left">配信タイミング</th>
											<th style="text-align: left">メッセージ管理名</th>
											<th style="width: 100px; text-align: right">プレビュー</th>
										</tr>
									</thead>
									<tbody>
										<tr
											v-for="(step, indexStep) in list_step"
											:class="{'row-active': indexStep == index_step}"
										>
											<td @click="showDetailStep(step.id, indexStep)" style="text-align: left">
												<div class="content-col" style="white-space: nowrap">
													@{{ indexStep + 1 }}
													<template v-if="step.delay_type == 1">ステップ開始時</template>
													<template v-if="step.delay_type == 0">@{{ step.start_day  }}日後@{{ step.start_time.split(':')[0] + ':' + step.start_time.split(':')[1] }}</template>
													<template v-if="step.delay_type == 2">@{{ step.start_time.split(':')[0] }}時間@{{ step.start_time.split(':')[1] }}分後</template>
												</div>
											</td>
											<td @click="showDetailStep(step.id, indexStep)">
												<div class="content-col" style="text-align: left">@{{ step.name ? step.name : '-' }}</div>
											</td>
											<td style="text-align: right">
												<button class="btn btn-sns-line btn-preview-step"
{{--														@click="previewStep(step.id, indexStep)"--}}
													@click="showDetailStep(step.id, indexStep)"
												>
													<i class="far fa-caret-circle-right"></i>
												</button>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="preview-tmp">

							<div class="broadcast">
								<div style="display: flex; align-items: center; font-size: 16px; font-weight: 300; color: #535657; margin-bottom: 30px;">
									<div style="margin-right: auto">@{{ info_time_send_step }}</div>
									@include('basic.template_v2.common.modal.step_message.header-preview')
								</div>
								@include('basic.template_v2.common.modal.step_message.preview-action-herme')
							</div>

							<div
									v-if="items.length > 0"
									v-show="step_message.tab_active == 'message'"
									class="border-preview">
								<div class="frame-preview">
									<template
											v-for="(item, index) in items">

										<template v-if="item.type == 'group'">
											<template v-for="(itemChild, indexChild) in item.template_childs">
												@include('basic.template_v2.common.modal.item-preview-child')
											</template>
										</template>

										<template v-else
										>
											@include('basic.template_v2.common.modal.item-preview')
										</template>
									</template>

								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
</template>


@push('js')
{{--	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>--}}

	<script src="/js/step_message/preview-all-step.js?v={{config('sns-line.version')}}"></script>
@endpush