<div class="modal-dialog modal-lg" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
      <h5><%= @product.name %></h5>
    </div>
    <!-- end modal-header -->
    <div class="modal-body">
      <div class="row">
        <div class="col-sm-5">
          <div class="carousel slide product-slider" data-ride="carousel" data-interval="false">
            <div class="carousel-inner">
              <% if @product.images.blank? %>
                <div class="item active">
                  <figure>
                    <%= image_tag 'kaktus.png' %>
                  </figure>
                </div>
              <% else %>
                <% test = 0 %>
                  <% @product.images.order('position').each do |image| %>
                    <div class="item<%= test == 0 ? ' active' : '' %>">
                      <figure>
                        <%= image_tag image.image.url(:thickbox) %>
                      </figure>
                    </div>
                    <% test = 1 %><% end %>
                  <% end %>

                  <!-- Arrows -->
                  <a class="left carousel-control" href=".product-slider" data-slide="prev">
                    <span class="fa fa-angle-left"></span>
                  </a>
                  <a class="right carousel-control" href=".product-slider" data-slide="next">
                    <span class="fa fa-angle-right"></span>
                  </a>
                </div>
                <!-- end carousel-inner -->

                <!-- thumbs -->
                <ol class="carousel-indicators mCustomScrollbar meartlab">
                  <% if @product.images.blank? %>
                    <li data-target=".product-slider" data-slide-to="0" class="active"><%= image_tag 'kaktus.png' %></li>
                  <% else %>
                    <% test = 0 %>
                      <%  @product.images.order('position').each do |image| %>
                        <li data-target=".product-slider" data-slide-to="<%= test %>" <%= raw test == 0 ? ' class="active"' : '' %>><%= image_tag image.image.url(:medium) %></li>
                        <% test += 1 %><% end %>
                      <% end %>
                    </ol>
                    <!-- end carousel-indicators -->
                  </div>
                  <!-- end carousel -->
                </div>
                <!-- end col -->
                <div class="col-sm-7">
                  <p class="text-gray alt-font">
                    <strong>Kategoria:</strong>
                    <%= @product.default_category.name %></p>
                  <h4 class="text-primary">PLN
                    <%= '%.2f' % @product.price %></h4>
                  <p><%= raw @product.description %></p>
                  <hr class="spacer-10">
                  <div class="row">
                    <div class="col-md-2 col-sm-4">
                      Ilość:
                    </div>
                    <div class="col-md-4 col-sm-8">
                      <select class="form-control" name="select" id="product_qty">
                        <% for i in 1..@product.max_qty %>
                          <option value="<%= i %>"><%= i %></option>
                        <% end %>
                      </select>
                    </div>
                    <!-- end col -->

                  </div>
                  <!-- end row -->
                  <hr class="spacer-10">
                  <ul class="list list-inline">
                    <li>
                      <button type="button" class="btn btn-default btn-md round" onclick="addToCart(event, '<%= @product.slug %>', '#product_qty');">
                        <i class="fa fa-shopping-basket mr-5"></i>Dodaj do koszyka</button>
                    </li>
                  </ul>
                </div>
                <!-- end col -->
              </div>
              <!-- end row -->
            </div>
            <!-- end modal-body -->
          </div>
          <!-- end modal-content -->
        </div>
        <!-- end modal-dialog -->
