@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/modal-preview-broadcast.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-broadcast" v-cloak>
	<div class="modal fade" id="modalPreviewBroadcast"
		 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'" style=" overflow: auto;    max-height: calc(73vh - 123px) !important;">
								@include('basic.template_v2.common.modal.broadcast.header-preview')
								<template v-if="broadcast.data && broadcast.data.screen == 'wait_to_send' &&
								 broadcast.tab_active == 'outline'
								">
									@include('basic.template_v2.common.modal.broadcast.outline')
								</template>
								@include('basic.template_v2.common.modal.broadcast.preview-action-herme')
							</div>

							<div v-if="items.length > 0"
									v-show="type == 'template' || (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>
						<div class="send-test">
							<div class="broadcast" style=" overflow: auto;max-height: calc(73vh - 123px) !important;"
								 v-if="type === 'broadcast' && broadcast.data && (broadcast.data.screen === 'screen_draft' || broadcast.data.screen === 'screen_delivered' || broadcast.data.screen === 'created_or_update')">
								@include('basic.template_v2.common.modal.broadcast.outline')

								<div class="wrap-action-draft" v-show="broadcast.data.screen == 'screen_draft'">
									<a :href="'/basic/add-broadcast-v2?broadcast_id=' + broadcast.data.id" class="btn btn-sns-line btn-edit-broadcast-draft">メッセージ編集</a>
									<button @click="listBroadCast && listBroadCast.deleteBroadCast(broadcast.data.id)" class="btn btn-sns-line btn-remove-broadcast-draft">削除</button>
								</div>

								<button  v-show="broadcast.data.screen == 'screen_delivered'"
										 class="btn btn-copy-broadcast-delivered"
										 @click="listBroadCast && listBroadCast.copyBroadcastV2(broadcast.data.id)"
								>同じ内容でメッセージを作成する</button>

								<div class="wrap-action-create-or-update-broadcast" v-if="broadcast.data.screen == 'created_or_update'">
									 <div class="edit-broad-close-modal" @click="$('#modalPreviewBroadcast').modal('hide')" style="cursor: pointer">修正する</div>

									<button
											 class="btn btn-copy-broadcast-delivered"
											 style="width: 190px; position: static; margin-left: 130px; transform: translateX(0px)"
											 @click="openAlertMessage"
									>この内容で配信登録</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		@include('basic.template_v2.common.modal.broadcast.modal-alert-message')
	</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/broadcast/modal-preview-draff-delivered.js?v={{config('sns-line.version')}}"></script>
@endpush