{% extends "templates/marketplace/base.html" %}
{%- from "templates/marketplace/macros.html" import button, link, breadcrumbs, badge_gray, badge_green,
five_star_rating, approved_badge -%}

{%- block title -%}
{{ app.title }} - Jingrow Marketplace
{%- endblock -%}

{%- block content -%}
<div>
	<div class="bg-gray-50">
		<div class="container mx-auto pt-4">
			<div class="pb-0 sm:pb-4 px-4 sm:px-8">
				{{ breadcrumbs([ { 'label': 'Apps', 'url': '/marketplace' }, { 'label':
				app.title, 'url': '' } ]) }}
			</div>
			<div class="px-4 sm:px-8 flex flex-col md:flex-row justify-between">
				<div class="mt-4 sm:mt-8 mb-8 sm:mb-12 flex">
						{{ app_image(app, 'hidden md:block') }}
					<div class="mr-2 md:hidden">{{ app_image(app) }}</div>
					<div class="flex flex-col">
						<h1 style="font-size: 20px;" class="flex font-semibold text-gray-900 md:text-5xl">
							{{ app.title }}
							{%- if app.jingrow_approved -%}
								<div class="ml-1 flex items-center justify-center">
									{{ approved_badge() }}
								</div>
							{%- endif -%}
						</h1>
						<p class="text-base text-gray-700 mt-1 md:mt-2">{{ app.description }}</p>
						<div class="hidden sm:block">
							<!-- Hard-coded for now -->
							 {%- for category in
							app.categories -%}
							<div class="inline-flex flex-row mt-4 mr-2">
								{{ badge_gray(category.category) }}
							</div>
							{%- endfor -%}
						</div>
					</div>
				</div>

				<div class="flex flex-row sm:flex-col pb-4 sm:pb-0 h-full w-fit my-auto justify-items-center">
					{{ button('Install Now', '/dashboard/install-app/' + app.name, 'primary') }}
					<div class="mt-2 flex flex-row text-sm text-gray-600 justify-items-end">
						<i class="w-4 h-4 mx-2" data-feather="download"></i>
						<span>{{ no_of_installs | number_k_format }} {{ 'install' if no_of_installs
							== 1 else 'installs' }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container mx-auto">
		<div class="px-4 sm:px-8 flex flex-col mt-4 pb-8 md:flex-row md:space-x-10">
		{{ sidebar() }} {{ main() }}
		</div>
	</div>
</div>
{%- endblock -%}


{% macro sidebar() %}
<div class="order-1 w-full md:order-none md:w-2/12 space-y-9 hidden sm:block">
	{%- if publisher_profile -%}
	<div>
		<h5 class="text-base font-semibold text-gray-900 mt-4">Built by</h5>
		<a class="text-sm text-gray-800 hover:text-gray-900"
			href="{{ 'mailto:{}'.format(publisher_profile.contact_email) if  publisher_profile.contact_email else '#'}}">
			{{ publisher_profile.display_name }}
		</a>
	</div>
	{%- endif -%}

	<div>
		<h5 class="text-base font-semibold text-gray-900 mb-2">Pricing</h5>
		{%- if app.subscription_type == 'Freemium'-%} {{ badge_green('Freemium')
		}} {%- elif app.subscription_type == 'Paid'-%} {{ badge_green('Paid') }}
		{%- else -%} {{ badge_gray('Free') }} {%- endif -%}
	</div>

	<div>
		<h5 class="text-base font-semibold text-gray-900">Resources</h5>
		<ul class="flex flex-col mt-2 space-y-2">
			{%- for label, icon, href in [ ('Visit Website', 'external-link',
			app.website), ('Support', 'life-buoy', app.support), ('Documentation',
			'file-text', app.documentation), ('Privacy Policy', 'lock',
			app.privacy_policy), ('Terms of Service', 'shield', app.terms_of_service)
			] -%} {%- if href -%}
			<li>
				<a class="flex flex-row space-x-1 text-gray-600 hover:text-gray-800" target="_blank" href="{{ href }}">
					<i class="w-4 h-4" data-feather="{{ icon }}"></i>
					<span class="text-sm">{{ label }}</span>
				</a>
			</li>
			{%- endif -%} {%- endfor -%}
		</ul>
	</div>

	<div>
		<h5 class="text-base font-semibold text-gray-900">Supported versions</h5>
		<ul class="mt-2 space-y-2 text-sm text-gray-600">
			{%- for supported_version in supported_versions -%}
			<li>
				{{
				link(supported_version.version,
				supported_version.jingrow_source.repository_url + '/tree/' +
				supported_version.jingrow_source.branch, blank=True)
				}}
			</li>
			{%- endfor -%}
		</ul>
	</div>
</div>
{% endmacro %}


{% macro main() %}
<div class="w-full md:w-10/12 md:border-b-0">
	<!-- Screenshots (if any) -->
	{%- if app.screenshots -%}
	<div class="flex space-x-4 mt-2 mb-6 overflow-y-auto">
		{%- for image in app.screenshots -%}
		<div class="flex-shrink-0 overflow-hidden border rounded-md h-60 w-80">
			<a href="{{ image.image }}">
				{%- if image.image.endswith("mp4") -%}
				<video class="object-cover w-full h-full">
					<source src="{{ image.image }}" type="video/mp4" />
				</video>
				{%- else -%}
				<img class="object-cover w-full h-full" src="{{ image.image }}" alt="{{ image.caption or '' }}" />
				{%- endif -%}
			</a>
		</div>
		{%- endfor -%}
	</div>
	{%- endif -%}
	<div class="w-full pb-8 prose prose-sm max-w-none text-gray-900">
		{{ jingrow.utils.md_to_html(app.long_description) }}
	</div>

	<!-- App Reviews Section -->
	<div class="max-w-4xl">
		<div>
			<div class="flex flex-row justify-between border-t pt-8" style="margin-bottom: 0.8rem;">
				<h2 class="text-2xl text-gray-900 font-bold">User Reviews</h2>
				{{ button('Write a review', link='/dashboard/user-review/' + app.name) }}
			</div>

			{%- if (user_reviews | length) > 0 -%}
			<div class="pl-4 flex flex-row space-x-1 divide-opacity-95 divide-x-2">
				<div class="text-center" style="padding-right: 2.75rem;">
					<h3 class="text-6xl text-gray-900 font-bold"> {{ ratings_summary.avg_rating }} </h3>
					<p class="text-base text-gray-600">
						{{ ratings_summary.total_num_reviews }}
						{{ 'rating' if ratings_summary.total_num_reviews == 1 else 'ratings'}}
					</p>
					<div class="mt-3 mb-1 bg-gray-100 py-2 px-3 rounded-full">
						{{ five_star_rating(ratings_summary.avg_rating) }}
					</div>
					<p class="text-sm text-gray-600">{{ ratings_summary.avg_rating }} out of 5</p>
				</div>
				<!-- Star percentages section -->
				<div class="space-y-2" style="padding-left: 2.75rem;">
					{%for i in range(5, 0, -1) %}
					<div class="flex flex-row text-gray-600 text-sm items-center space-x-2">
						<p>{{i}} Star</p>
						<div class="w-28 h-1 bg-gray-200 rounded-full" style="width: 7rem;">
							<div class="h-1 bg-gray-600 rounded-full"
								style="width: {{ ratings_summary.rating_percentages[i] }}%;"></div>
						</div>
						<p>{{ ratings_summary.rating_percentages[i] }}%</p>
					</div>
					{% endfor %}
				</div>
			</div>

			<!-- Written reviews section -->
			<div class="mt-12 divide-y-2 divide-gray-200">
				{% for review in user_reviews %}
				<div class="pb-3">
					<div class="mb-2 mt-3 flex flex-row items-center">
						<h3 class="text-gray-900 font-semibold text-lg">
							{{ review.title }}
						</h3>
						<div class="ml-3">
							{{ five_star_rating(review.rating) }}
						</div>
					</div>
					<p class="text-base text-gray-900 mb-2">
						{{ review.review }}
					</p>
					<div class="text-base text-gray-600">
						{{ review.user_name }} &bull; {{ jingrow.utils.pretty_date(review.creation) }}
						&bull; {{ link('Reply', url='/dashboard/developer-reply/' + app.name + '/' + review.name) }}
						<div class="flex flex-col mt-4">
							{% for reply in review.developer_reply %}
							<div class="flex flex-row text-gray-900 mb-2">

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#71717A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-down-right mr-2 mt-2"><polyline points="15 10 20 15 15 20"></polyline><path d="M4 4v7a4 4 0 0 0 4 4h12"></path></svg>

<div>
							{% if reply[0] == ',' %}
								{{ reply[1:] }}
							{% else %}
								{{ reply }}
							{% endif %}
							{% if reply %}
							<span class="text-gray-600"></br>Developer
							{% endif %}
</div>
							</div>
							{% endfor %}
						</div>
					</div>
				</div>
				{% endfor %}
			</div>
			{%- else -%}
			<div>
				<p class="text-gray-700 text-lg">No reviews yet, be the first to review.</p>
			</div>
			{%- endif -%}
		</div>
	</div>
</div>
{% endmacro %}


{% macro app_image(app, class='') %}
<div class="w-12 h-12 lg:w-16 lg:h-16 mr-2 {{ class }}">
	{%- if app.image -%}
	<img class="object-cover border border-gray-200 rounded-lg" src="{{ app.image }}" alt="{{ app.title }}" />
	{%- else -%}
	<div class="flex items-center justify-center text-gray-500 bg-gray-100 border border-gray-200 rounded-lg">
		{{ app.title[0].upper() }}
	</div>
	{%- endif -%}
</div>
{% endmacro %}


{% macro app_plans_list(plans) %}
<div class="mx-auto grid grid-cols-1 gap-2 md:grid-cols-3 sm:grid-cols-2">
	{%- for plan in plans -%}
	{{ app_plan_card(plan) }}
	{%- endfor -%}
</div>
{% endmacro %}


{% macro app_plan_card(plan) %}
<div class="flex flex-col justify-between rounded-2xl border border-gray-100 p-5 shadow hover:border-gray-300">
	<div>
		<h4 class="text-xl font-semibold text-gray-900">
			{%- if plan.is_free -%}
			<span> Free </span>
			{%- else -%}

			<span>
				${{ jingrow.utils.rounded(plan.price_usd) }}<span class="text-base font-normal text-gray-600">
					/mo</span>
			</span>
			{%- endif -%}
		</h4>

		<div class="mt-5">
			{{ feature_list(plan.features) }}
		</div>
	</div>

	<div class="mt-4">
		{{ button('Buy', '/dashboard/install-app/' + app.name, 'primary') }}
	</div>
</div>
{% endmacro %}


{% macro feature_list(features) %}
<ul class="space-y-2 text-sm text-gray-700">
	{%- for feature in features -%}
	<li class="flex flex-row justify-items-center" v-for="feature in features" :key="feature">
		<div class="mr-2">
			<!-- Circular check icon -->
			<div class="grid h-4 w-4 shrink-0 place-items-center rounded-full border border-green-500 bg-green-50">
				<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M1.26562 3.86686L3.93229 6.53353L9.26562 1.2002" stroke="#38A160" stroke-miterlimit="10"
						stroke-linecap="round" stroke-linejoin="round" />
				</svg>
			</div>
		</div>
		{{ feature }}
	</li>
	{%- endfor -%}
</ul>
{% endmacro %}