<article class="content-block overview-product" ng-controller="productOverviewItemController">

    <div class="top-container">

        {{-- Image, title, articleNumbers etc. --}}
        <div class="product-info-container">

            <figure class="image-holder">

                {{-- Image--}}
                @include('partials.products.overviewImage')

            </figure>

            <div class="product-info">

                {{--Product Title--}}
                <h2 class="product-title">
                    <a href="/{{ $product->route }}"> @include('partials.products.title')</a>
                </h2>

                @if($product->special_2)
                    {{--Show warning--}}
                    @include('partials.products.warning')
                @endif

                {{--Article number--}}
                <span class="article-number">

                    {{ Lang::get('pages/products.article_number') }} <strong>TOPS</strong>: {{ $product->internal_article_number }}<br/>

                    @if($product->article_number and $product->article_number != '-')
                        {{ Lang::get('pages/products.article_number') }}
                        <strong>{{ $product->supplier_name }}</strong>:
                        @if(strlen($product->article_number) > 70)
                            <span class="article-number__limiter">{{ $product->article_number }}</span>
                        @else
                            {{ $product->article_number }}
                        @endif
                    @endif

                </span>

                {{--Read more --}}
                <a class="read-more" href="/{{ $product->route }}">@lang('pages/products.read_more')</a>

            </div>
        </div>

        {{-- Price, stock, submit etc. --}}
        <div class="order-info">

            {{-- What is this? --}}
            <script type="application/json" json-data ng-model="discountData">
                {{ json_encode($product->discounts) }}
            </script>

            {{-- Prices --}}
            @include('partials.products.pricesBlock')

            {{-- Stock --}}
            <span class="in-stock dt-{{ $product->delivery_time }}">{{ Lang::get('pages/products.' . $product->delivery_time)}}</span>
        </div>
        <div class="clear"></div>

        <div class="order-info-bottom-container">

            {{-- Amount and submit --}}
            <form class="order-row"
                  action="/{{ $shop->getPageService()->page('cart')->route }}/addProductById/{{ $product->id }}"
                  method="get"
                  data-ecommerce-add-to-cart-data='{{ json_encode($product->addToCartEcommerceData) }}'
            >

                <div class="quantity-holder">
                    <input type="tel" name="quantity" ng-value="quantityVal" ng-model="quantity"
                           value="1"/>

                    <div class="quantity-btns">
                        <div class="quantity-btn add" ng-click="addToQuantity(1)"></div>
                        <div class="quantity-btn remove" ng-click="addToQuantity(-1)"></div>
                    </div>
                </div>
                <div class="btn-holder">
                    @include('partials.buttons.input',[
                        'input' => Form::submit(''),
                        'text' => Lang::get('pages/products.add_to_cart'),
                        'class' => 'green-btn'
                    ])
{{--                    <div class="btn input animate green-btn" data-text="{{ Lang::get('pages/products.add_to_cart') }}">--}}
{{--                        <span class="text">{{ Lang::get('pages/products.add_to_cart') }}</span>--}}
{{--                        <input type="button" ng-click="addToCart('/{{ $shop->getPageService()->page('cart')->route }}/addProductById/{{ $product->id }}')">--}}
{{--                    </div>--}}
                    <div class="amount-holder" ng-bind-html="amountHolder"></div>
                </div>
            </form>
            {{-- Discount bar --}}
            @include('partials/products/discountBar')
        </div>
    </div>

    <div class="bottom-container">
        <div class="composition-container">

            @if(is_array($product->composition) && count($product->composition))

                {{--U receive (composition)--}}
                <div class="overview-composition-title">

                    <div class="header">
                        {{ Lang::get('pages/products.you_will_receive')}}
                    </div>
                </div>

                <div class="overview-composition">
                    @include('partials.composition',['composition' => $product->composition])
                </div>
            @endif

        </div>
        <div class="usp-container">
            @include('partials/products/benefits')
        </div>
    </div>
</article>