{% extends "templates/web.html" %}

{% block breadcrumbs %}{% endblock %}

{% macro header_buttons() %}
	{% if allow_edit and in_view_mode %}
		<!-- edit button -->
		<a href="/{{ route }}/{{ doc_name }}/edit" class="edit-button btn btn-default btn-sm">{{ _("Edit Response", null, "Button in web form") }}</a>
	{% endif %}

	{% if allow_print and in_view_mode %}
		{% set print_format_url = "/printview?doctype=" + doc_type + "&name=" + doc_name + "&format=" + print_format %}
		<!-- print button -->
		<a href="{{ print_format_url }}" target="_blank" class="print-btn btn btn-default btn-sm ml-2">
			<svg class="icon icon-sm"><use href="#icon-printer"></use></svg>
		</a>
	{% endif %}
{% endmacro %}

{% macro action_buttons() %}
	<div class="left-area">
		{% if not in_view_mode %}
			<!-- clear button -->
			<a href="/{{ path }}" class="clear-btn btn btn-default btn-sm">
				{% if in_edit_mode %}
					{{ _("Reset Form", null, "Button in web form") }}
				{% else %}
					{{ _("Clear Form", null, "Button in web form") }}
				{% endif %}
			</a>
		{% endif %}
	</div>
	<div class="center-area paging"></div>
	<div class="right-area">
		{% if not in_view_mode %}
			<!-- submit button -->
			<button type="submit" class="submit-btn btn btn-primary btn-sm ml-2">{{ button_label or _("Submit", null, "Button in web form") }}</button>
		{% endif %}
	</div>
{% endmacro %}

{% block page_content %}
	<!-- banner image -->
	{% if banner_image %}
		<div class="web-form-banner-image">
			<img src="{{ banner_image }}" alt="Banner Image">
		</div>
	{% endif %}

	<!-- web form container -->
	<div class="web-form-container">
		<!-- breadcrumb -->
		{% if not banner_image and has_header and login_required and show_list %}
			{% include "templates/includes/breadcrumbs.html" %}
			{% else %}
				<div style="height: 3rem"></div>
		{% endif %}

		<!-- header -->
		<div class="web-form-header">
			{% if banner_image and has_header and login_required and show_list %}
				{% include "templates/includes/breadcrumbs.html" %}
			{% endif %}
			<div class="web-form-head">
				<div class="title">
					<h1>{{ _(title) }}</h1>
					<div class="web-form-actions">
						{{ header_buttons() }}
					</div>
				</div>
				{% if is_new and introduction_text %}
					<div class="web-form-introduction">{{ introduction_text }}</div>
				{% endif %}
			</div>
		</div>

		<!-- main card -->
		<form role="form" class="web-form">
			<div class="web-form-body">
				<div class="web-form-wrapper">
					{% include "website/doctype/web_form/templates/web_form_skeleton.html" %}
				</div>
			</div>
			<div class="web-form-footer">
				<div class="web-form-actions">
					{{ action_buttons() }}
				</div>
			</div>
		</form>

		<!-- attachments -->
		{% if show_attachments and not is_new and attachments %}
			<div class="attachments">
				<h5 class="mb-3">{{ _("Attachments") }}</h5>
				{% for attachment in attachments %}
					<a class="attachment attachment-link" href="{{ attachment.file_url }}" target="blank">
						<div class="file-name ellipsis">
							<svg class="icon icon-sm"><use href="#icon-attachment"></use></svg>
							<span>{{ attachment.file_name }}</span>
						</div>
						<div class="file-size">{{ attachment.file_size }}</div>
					</a>
				{% endfor %}
			</div>
		{% endif %} {# attachments #}

		<!-- comments -->
		{% if allow_comments and not is_new and not is_list -%}
			<div class="comments">
				<h3>{{ _("Comments") }}</h3>
				{% include 'templates/includes/comments/comments.html' %}
			</div>
		{%- else -%}
			<div style="height: 3rem"></div>
		{%- endif %} {# comments #}
	</div>

	<!-- success page -->
	<div class="success-page hide">
		<svg class="icon">
			<use href="#icon-solid-success"></use>
		</svg>
		<h2 class="success-title">{{ _(success_title) or _("Submitted") }}</h2>
		<p class="success-message">{{ _(success_message) or _("Thank you for spending your valuable time to fill this form") }}</p>

		{% if success_url %}
			<div class="success_url_message">
				<p>
					<span>Click on this </span>
					<a href="{{ success_url }}">{{_("URL")}}</a>
					<span> if you are not redirected within </span>
					<span class="time">5</span>
					<span> seconds.</span>
				</p>
			</div>
		{% else %}
			{% if show_list %}
				<a href="/{{ route }}/list" class="show-list-button btn btn-default btn-md mr-2">{{ _("See previous responses", null, "Button in web form") }}</a>
			{% endif %}
			{% if not login_required or allow_multiple %}
				<a href="/{{ route }}/new" class="new-btn btn btn-default btn-md">{{ _("Submit another response", null, "Button in web form") }}</a>
			{% endif %}
		{% endif %}
	</div>

{% endblock page_content %}

{% block script %}
	<script>
		frappe.boot = {{ boot }};
		frappe._messages = {{ translated_messages }};
		frappe.web_form_doc = {{ web_form_doc | json }};
		frappe.reference_doc = {{ reference_doc | json }};
	</script>

	<script type="text/javascript" src="/assets/frappe/node_modules/vue/dist/vue.js"></script>
	<script>
		Vue.prototype.__ = window.__;
		Vue.prototype.frappe = window.frappe;
	</script>

	{{ include_script("controls.bundle.js") }}
	{{ include_script("dialog.bundle.js") }}
	{{ include_script("web_form.bundle.js") }}
	{{ include_script("bootstrap-4-web.bundle.js") }}

	<script>
		{% if client_script %}
			frappe.init_client_script = () => {
				try {
					{{ client_script }}
				} catch(e) {
					console.error('Error in web form client script');
					console.error(e);
				}
			}
		{% endif %}

		{% if script is defined %}
			{{ script }}
		{% endif %}
	</script>
{% endblock script %}

{% block style %}
	<style>
		{% if style is defined %}
			{{ style }}
		{% endif %}
		{% if custom_css %}
			{{ custom_css }}
		{% endif %}
	</style>
{% endblock %}