@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/template_v2/modal-preview-send-test.css?v={{config('sns-line.version')}}">
	<link rel="stylesheet" href="/css/template_v2/modal/broadcast.css?v={{config('sns-line.version')}}">

	<style>
        .toast-close {
            margin-right: 15px;
            background-color: #E0E0E0;
			border-radius: 50%;
            margin-left: auto;
            justify-content: center;
            align-items: center;
            display: flex;
            padding: 0px;
            width: 25px;
            height: 25px;
			margin-left: 10px;
			padding-top: 2px;
		}

		.toastify {
            min-width: 213px;
			background: none;
			background-color: #F5FDF9;
			color: #08BF5A;
			display: flex;
			align-items: center;
            height: 40px;
            padding: 7px 10px;
		}

		.toastify-avatar {
            width: 24px;
			height: 24px;
		}
	</style>
@endpush
<template id="wrap-modal-preview-send-test" v-cloak>
	<div class="modal fade" id="modalPreviewSendTest"
		 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">@{{ getTitleModal }}</h2>
					<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="preview-tmp">

							<div class="broadcast" v-if="type == 'broadcast'" >
								@include('basic.template_v2.common.modal.broadcast.header-preview')
								<template v-if="broadcast.data && (broadcast.data.screen == 'wait_to_send' || broadcast.data.screen == 'created_or_update') &&
								 broadcast.tab_active == 'outline'
								">
									<div style="    max-height: calc(73vh - 165px) !important;    overflow: auto;">
										@include('basic.template_v2.common.modal.broadcast.outline')
									</div>

								</template>

								@include('basic.template_v2.common.modal.broadcast.preview-action-herme')
							</div>

							<div class="broadcast" v-if="type == 'step_message'" style=" max-height: calc(73vh - 102px) !important;    overflow: auto;">
								@include('basic.template_v2.common.modal.step_message.header-preview')
								@include('basic.template_v2.common.modal.step_message.preview-action-herme')
							</div>

							<div
									v-if="items.length > 0"
									v-show="type == 'template' || type == 'schedule_send_chat' || (type == 'step_message' && step_message.tab_active == 'message') || (type == 'broadcast' && broadcast.data && broadcast.tab_active == 'message')"
									class="border-preview">
								<div class="frame-preview">
									<template
											v-for="(item, index) in items">
										<template v-if="item && item != null">
											<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>
									</template>

								</div>
							</div>
							<div v-if="type == 'form-answer'">
								<p>@{{ linkFormAnswer }}</p>
							</div>
							<div class="border-preview" v-if="type == 'qrlanding'">
								<div class="frame-preview">
									<div class="item-preview text">@{{ link_qr_landing }}</div>
								</div>
							</div>
						</div>
						<div class="send-test">
							<div v-show="type == 'template' ||type == 'schedule_send_chat' || type == 'step_message' || (type == 'broadcast' && broadcast.data && (broadcast.data.screen == 'wait_to_send'  || broadcast.data.screen == 'created_or_update')) || type == 'form-answer' || type == 'qrlanding'">
								@include('basic.template_v2.common.modal.list-user-send-test')
							</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/template_v2/messages/modal/item-preview-template.js?v={{config('sns-line.version')}}"></script>

	<script src="/js/template_v2/messages/modal-preview-send-test.js?v={{config('sns-line.version')}}"></script>
@endpush