<# var accent_color = collection.get('tcm_color_picker_value').get('value') || '#03a9f4'; #>
<div class="tvd-modal-content">
	<div class="tcm-modal-header">
		<h2>
			<?php echo __( 'Customize Notification for New Reply to Comment', Thrive_Comments_Constants::T ); ?>
		</h2>
	</div>

	<div class="tcm-modal-body">
		<div class="notification-left">
			<div class="container-nl">
				<h4>Email Subject</h4>
				<div class="tcm-label-to-input tcmlti-one">
					<p class="tcm-customize-label"><#= labels.email_subject.text#></p>
					<textarea type="text" class="tcm_label tcm-input-label" name='tcm_label' placeholder="<#= labels.email_subject.default#>" data-key="email_subject" data-default="<#= labels.email_subject.default#>" hidden><#= labels.email_subject.text#></textarea>
					<a class="button-link icon-pen tcm-icon-pencil tcm-customize-label" href="javascript:void(0)"> </a>
				</div>
			</div>

			<div class="container-nl-two">
				<h4>Email Content</h4>

				<div>
					<div class="tcm-label-to-input tcmlti-one">
						<p class="title tcm-customize-label"><#= labels.content_title.text#></p>
						<textarea type="text" class="tcm_label tcm-input-label" name='tcm_label' placeholder="<#= labels.content_title.default#>" data-key="content_title" data-default="<#= labels.content_title.default#>" hidden><#= labels.content_title.text#></textarea>
						<a class="button-link icon-pen tcm-icon-pencil tcm-customize-label" href="javascript:void(0)"> </a>
					</div>
					<div class="tcm-label-to-input tcmlti-two">
						<p class="tcm-customize-label"><#= labels.comment_posted.text#></p>
						<textarea type="text" class="tcm_label tcm-input-label" name='tcm_label' placeholder="<#= labels.comment_posted.default#>" data-key="comment_posted" data-default="<#= labels.comment_posted.default#>" hidden><#= labels.comment_posted.text#></textarea>
						<a class="button-link icon-pen tcm-icon-pencil tcm-customize-label" href="javascript:void(0)"> </a>
					</div>

					<div class="hardcoded-comment">
						<div class="tcm-comment-author-img" style="background-image: url(<?php echo get_site_url(); ?>/wp-content/plugins/thrive-comments/assets/images/avatar_03.png)"></div>
						<div class="comm-content">
							<h4>Evan R</h4>
							<span>07-06-2017</span>
							<p>Thrive themes just keep getting better. Excellent new feature guys, keep up the good work!</p>
							<div class="tcm-label-to-input tcmlti-three" style="background-color:<#= accent_color #>;">

								<p class="tcm-customize-label"><#= labels.reply_to.text#></p>
								<textarea id="unsubscribe-textarea" type="text" class="tcm_label tcm-input-label" name='tcm_label' placeholder="<#= labels.reply_to.default#>" data-key="reply_to" data-default="<#= labels.reply_to.default#>" hidden><#= labels.reply_to.text#></textarea>

								<a class="button-link icon-pen tcm-icon-pencil tcm-customize-label" href="javascript:void(0)"> </a>

								<a class="error-icon button-error-icon tooltipelem" href="javascript:void(0)" hidden>
									<span class="tooltiptext"><?php echo __( 'Field cannot be empty.', Thrive_Comments_Constants::T ); ?></span>
								</a>
							</div>
						</div>
					</div>

					<hr class="reply-sep"/>

					<div class="tcm-label-to-input tcmlti-four">
						<p class="special-p tcm-customize-label"><#= labels.replied_comment.text#></p>
						<textarea type="text" class="tcm_label tcm-input-label" name='tcm_label' placeholder="<#= labels.replied_comment.default#>" data-key="replied_comment" data-default="<#= labels.replied_comment.default#>" hidden><#= labels.replied_comment.text#></textarea>
						<a class="button-link icon-pen tcm-icon-pencil tcm-customize-label" href="javascript:void(0)"> </a>
					</div>

					<div class="hardcoded-reply">
						<div class="tcm-comment-author-img" style="background-image: url(<?php echo get_site_url(); ?>/wp-content/plugins/thrive-comments/assets/images/avatar_03.png)"></div>
						<div class="comm-content">
							<p>Thrive themes just keep getting better. Excellent new feature guys, keep up the good work!</p>
						</div>
					</div>

					<hr class="reply-sep"/>

					<div class="tcm-label-to-input tcmlti-five">
						<p class="special-p tcm-customize-label"><#= labels.signed_up.text#></p>
						<textarea type="text" class="tcm_label tcm-input-label" name='tcm_label' placeholder="<#= labels.signed_up.default#>" data-key="signed_up" data-default="<#= labels.signed_up.default#>" hidden><#= labels.signed_up.text#></textarea>
						<a class="button-link icon-pen tcm-icon-pencil tcm-customize-label" href="javascript:void(0)"> </a>
					</div>

					<div class="tcm-label-to-input special-input tcmlti-six">
						<p class="special-p w-border tcm-customize-label"><#= labels.unsubscribe.text#></p>
						<textarea type="text" class="tcm_label tcm-input-label" name='tcm_label' placeholder="<#= labels.unsubscribe.default#>" data-key="unsubscribe" data-default="<#= labels.unsubscribe.default#>" hidden><#= labels.unsubscribe.text#></textarea>
						<a class="button-link icon-pen tcm-icon-pencil tcm-customize-label" href="javascript:void(0)"> </a>
					</div>
				</div>
			</div>
		</div>

		<div class="notification-shortcodes">
			<h4 style="margin-bottom: 8px;">Notification shortcodes:</h4>

			<div class="tcm-copy-container tcm-copy-input-content">
				<span class="tooltipelem tcm-icon-information">
					<span class="tooltiptext">The first 10 words of the main comment</span>
				</span>

				<p>{comment_start}</p>
				<div class="tcm-copy-input-content">
					<a class="tcm-click-to-copy" href="javascript:void(0)" data-clipboard-text="{comment_start}"><?php echo __( 'Copy', Thrive_Comments_Constants::T ); ?></a>
				</div>
			</div>

			<div class="tcm-copy-container tcm-copy-input-content">
				<span class="tooltipelem tcm-icon-information">
					<span class="tooltiptext">The title of the post or page that the comment was made on</span>
				</span>

				<p>{source_page}</p>
				<div class="tcm-copy-input-content">
					<a class="tcm-click-to-copy" href="javascript:void(0)" data-clipboard-text="{source_page}" ><?php echo __( 'Copy', Thrive_Comments_Constants::T ); ?></a>
				</div>
			</div>

            <div class="tcm-copy-container tcm-copy-input-content">
				<span class="tooltipelem tcm-icon-information">
					<span class="tooltiptext">The site's title, taken from the WordPress settings</span>
				</span>

                <p>{site_title}</p>
                <div class="tcm-copy-input-content">
                    <a class="tcm-click-to-copy" href="javascript:void(0)" data-clipboard-text="{site_title}" ><?php echo __( 'Copy', Thrive_Comments_Constants::T ); ?></a>
                </div>
            </div>

            <div class="tcm-copy-container tcm-copy-input-content">
				<span class="tooltipelem tcm-icon-information">
					<span class="tooltiptext">The name of the person who receives the notification</span>
				</span>

                <p>{comment_author}</p>
                <div class="tcm-copy-input-content">
                    <a class="tcm-click-to-copy" href="javascript:void(0)" data-clipboard-text="{comment_author}" ><?php echo __( 'Copy', Thrive_Comments_Constants::T ); ?></a>
                </div>
            </div>

			<div class="tcm-copy-container tcm-copy-input-content">
				<span class="tooltipelem tcm-icon-information">
					<span class="tooltiptext">The name of the person who wrote the reply or the new comment</span>
				</span>

				<p>{source_commenter_name}</p>
				<div class="tcm-copy-input-content">
					<a class="tcm-click-to-copy" href="javascript:void(0)" data-clipboard-text="{source_commenter_name}" ><?php echo __( 'Copy', Thrive_Comments_Constants::T ); ?></a>
				</div>
			</div>
			<div class="tcm-copy-container tcm-copy-input-content">
				<span class="tooltipelem tcm-icon-information">
					<span class="tooltiptext">The text that the user sets up in the field below</span>
				</span>
				<p>{unsubscribe_link}</p>

				<div class="tcm-copy-input-content">
					<a class="tcm-click-to-copy" href="javascript:void(0)" data-clipboard-text="{unsubscribe_link}" ><?php echo __( 'Copy', Thrive_Comments_Constants::T ); ?></a>
				</div>
			</div>

			<h4><?php echo __( 'Unsubscribe link text:', Thrive_Comments_Constants::T ); ?></h4>
			<div class="tcm-label-to-input special-input">
				<p class="tcm-single-p"><#= labels.unsubscribe_text.text#></p>
				<textarea id="unsubscribe_text" type="text" class="tcm_label tcm-input-label" name='tcm_label' placeholder="<#= labels.unsubscribe_text.default#>" data-key="unsubscribe_text" data-default="<#= labels.unsubscribe_text.default#>" hidden><#= labels.unsubscribe_text.text#></textarea>
				<a class="button-link icon-pen tcm-icon-pencil tcm-customize-label" href="javascript:void(0)"></a>

				<a class="error-icon unsubscribe-error-icon tooltipelem" href="javascript:void(0)" hidden>
					<span class="tooltiptext"><?php echo __( 'Field cannot be empty and cannot have shortcodes in it.', Thrive_Comments_Constants::T ); ?></span>
				</a>
			</div>

			<div class="revert_notification_labels">
				<a href="javascript:void(0)" class="tvd-btn-flat tvd-btn-flat-primary tvd-btn-flat-dark tvd-waves-effect"><?php echo __( 'Click here to revert', Thrive_Comments_Constants::T ); ?></a>
			</div>

		</div>

	</div>

	<div class="tcm-btm">
		<a href="javascript:void(0)" class="tvd-btn-flat tvd-btn-flat-secondary tvd-btn-flat-dark tvd-modal-close tvd-waves-effect tcm-back-btn tcm-discard-changes"><?php echo __( 'Back', Thrive_Comments_Constants::T ) ?></a>
		<a href="javascript:void(0)" class="tvd-waves-effect tvd-waves-light tvd-btn tvd-right tvd-modal-submit tcm-save-labels"><?php echo __( 'Save', Thrive_Comments_Constants::T ) ?></a>
	</div>

</div>
