{% extends "weirdlittleempire/catalog/product-detail.html" %}
{% load i18n cms_tags thumbnail %}

{% block main-content %}
{% thumbnail product.images.first 250x250 crop as thumb %}
<div class="container">
	<div class="row">
		<div class="col col-md-10 offset-md-1">
			<h1>{% render_model product "product_name" %}</h1>
			<div class="media mb-3 flex-column flex-md-row">
				<img class="mr-3 mb-3" src="{{ thumb.url }}" width="{{ thumb.width }}" height="{{ thumb.height }}" alt="{{ product.product_name }}">
				<div class="media-body">
					{{ product.description|safe }}
				</div>
			</div>
			<h4>{% trans "Details" %}</h4>
			<ul class="list-group mb-3">
				<li class="list-group-item d-flex">
					<div class="w-50">{% trans "Card Type" %}:</div>
					<strong>{{ product.get_card_type_display }}</strong>
				</li>
				<li class="list-group-item d-flex">
					<div class="w-50">{% trans "Storage capacity" %}:</div>
					<strong>{{ product.storage }} GB</strong>
				</li>
				<li class="list-group-item d-flex">
					<div class="w-50">{% trans "Manufacturer" %}:</div>
					<strong>{{ product.manufacturer }}</strong>
				</li>
			</ul>
			<!-- include "Add to Cart" dialog box -->
			{% include "shop/catalog/available-product-add2cart.html" with card_css_classes="mb-3" %}
		</div>
	</div>
</div>
{% endblock main-content %}
