{% extends 'base.html' %}
{% load static %}


{% block content %}

<div class="container" xmlns="http://www.w3.org/1999/html">
                <div class="row">
                        <div class="col-lg-6 ">
                                {% for image in product.productimage_set.all %}
                                    <div class="product-image-item">
                                        <img src="{{ image.image.url }}" class="img-responsive">
                                    </div>
                                {% endfor %}
                        </div>
                        <div class="col-lg-6">
                                <h1 class="text-center">
                                        {{product.name}}
                                </h1>
                                <div class="text-center">
                                        <h4>Цена: {{ product.price }}.руб</h4>
                                </div>
                          <div>
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                            <a href="#description" aria-controls="home" role="tab" data-toggle="tab">
                                Описание
                            </a>
                            </li>
                            <li role="presentation">
                            <a href="#delivery" aria-controls="profile" role="tab" data-toggle="tab">
                                Доставка
                            </a>
                            </li>
                            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                            <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
                            </ul>
                          </div>

                      <!-- Tab panes -->
                      <div class="tab-content product-description-tabs">
                        <div role="tabpanel" class="tab-pane active" id="description">
                             <div class="tab-content">
                                 {{ product.description }}
                             </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="delivery">
                            <h3>Как мы делаем доставку</h3>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="messages">...</div>
                        <div role="tabpanel" class="tab-pane" id="settings">...</div>
                      </div>
                     </div>
                    <div class="">
                        <form id="form_buying_product" class="form-inline" action="{% url 'basket_adding' %}">{% csrf_token %}
                            <div class="form-group">
                                <input type="number" class="form-control" id = "number">
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-success btn-buy" id ="submit_btn" data-product_id = "{{ product.id }}"
                                data-product_name = "{{product.name}}" data-price = "{{product.price}}">Купить</button>
                            </div>

                        </form>


                    </div>

                </div>
        </div>


{% endblock %}