<div class="content">

    {#{% if application.volume > 10 or application.weight > 10000 %}
        <div class="kontener">
            <span class="head">Sprawdź!</span>
            Twój ładunek jest duży, sprawdź czy wysłanie całego<br> kontenera nie jest tańsze w serwisie <a href="http://kontener.pl" target="_blank">kontener.pl</a>
        </div>
    {% endif %}#}

    <div class="steps">
        <ul>
            <li>
                <div class="ellipse"></div>
                <div class="number">Krok 1</div>
                <div class="name">Fracht morski</div>
            </li>
            <li class="done">
                <div class="ellipse"></div>
                <div class="number">Krok 2</div>
                <div class="name">Opcje transportowe</div>
            </li>
            <li>
                <div class="ellipse"></div>
                <div class="number">Krok 3</div>
                <div class="name">Zapytanie ofertowe</div>
            </li>
        </ul>
    </div>

    {% set loadingUnloadingNames = application.connection.loading.name ~ '-' ~ application.connection.unloading.name %}

    {{ form_start(form, { action: '//second-step-url//', attr: { 'data-step': 1 } }) }}
        {# HIDDEN #}
        {{ form_row(form.loading) }}
        {{ form_row(form.unloading) }}
        {{ form_row(form.volume) }}
        {{ form_row(form.weight) }}
        {# END HIDDEN #}

        <div class="checkboxes">
            <div class="form-group">
                <div class="checkbox">
                    <div class="check"><input type="checkbox" checked="checked" disabled="true"></div>
                    <label>Fracht morski <a href="javascript:" data-hint-name="fret">?</a><span>({{ loadingUnloadingNames }}, {{ application.connectionCost|round(0, 'floor') }} USD)</span></label>
                </div>
            </div>
            <div class="form-group">
                <div class="checkbox">
                    <div class="check"><input type="checkbox" checked="checked" disabled="true"></div>
                    {#<label>Opcje transportowe <span>(<span class="cities">{{ loadingUnloadingNames }}, </span>999 USD)</span><a href="javascript:">?</a></label>#}
                    <label>Opcje transportowe<a href="javascript:" data-hint-name="transport-options">?</a> <span>({{ loadingUnloadingNames }})</span></label>
                </div>
            </div>
            <div class="margin">
                <div class="form-group">
                    <div class="checkbox">
                        <div class="check">{{ form_widget(form.documentary) }}</div>
                        <label>Opłata dokumentacyjna<a href="javascript:" data-hint-name="documentary">?</a> <span>({{ settings.documentary }} {% if application.connection.useeuro == true %}EUR{% else %}USD{% endif %})</span></label>
                    </div>
                </div>
                {% if application.loading.country == 'Polska' %}
                    <div class="form-group">
                        <div class="checkbox">
                            <div class="check">{{ form_widget(form.thc) }}</div>
                            <label>Koszty magazynowe<a href="javascript:" data-hint-name="warehouse">?</a> <span>({{ application.warehouse|round(0, 'floor') }} {% if application.connection.useeuro == true %}EUR{% else %}USD{% endif %})</span></label>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        <div class="checkbox">
                            <div class="check">{{ form_widget(form.thc) }}</div>
                            <label>Koszty terminalowe THC<a href="javascript:" data-hint-name="thc">?</a> <span>({{ application.thc|round(0, 'floor') }} {% if application.connection.useeuro == true %}EUR{% else %}USD{% endif %})</span></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="checkbox">
                            <div class="check">{{ form_widget(form.isps) }}</div>
                            <label>Podjęcie z magazynu<a href="javascript:" data-hint-name="isps">?</a> <span>({{ application.isps|round(0, 'floor') }} {% if application.connection.useeuro == true %}EUR{% else %}USD{% endif %})</span></label>
                        </div>
                    </div>
                {% endif %}
                <div class="form-group">
                    <div class="checkbox">
                        <div class="check">{{ form_widget(form.customs) }}</div>
                        <label>Odprawa celna<a href="javascript:" data-hint-name="customs">?</a> <span>({{ settings.customs }} {% if application.connection.useeuro == true %}EUR{% else %}USD{% endif %})</span></label>
                    </div>
                </div>
            </div>
            {% if application.loading.country != 'Polska' %}
                <div class="form-group">
                    <div class="checkbox">
                        <div class="check">{{ form_widget(form.transport, { attr: { 'data-transport-checkbox': 'true' } }) }}</div>
                        <label>Transport drogowy<a href="javascript:" data-hint-name="transport">?</a></label>
                    </div>
                </div>
            {% endif %}

            {% if application.loading.country == 'Polska' %}
                <div class="hide-last-border"></div>
            {% endif %}
        </div>

        {% if application.loading.country != 'Polska' %}
            <div class="transport">
                <div class="form-group {% if not form.postalCode.vars.valid %}error{% endif %}">
                    {{ form_widget(form.postalCode) }}
                    <label>Kod pocztowy</label>
                </div>
                <div class="form-group {% if not form.city.vars.valid %}error{% endif %}">
                    {{ form_widget(form.city) }}
                    <label>Miejscowość</label>
                </div>
                <div class="form-group dimensions {% if not form.firstDimension.vars.valid or not form.secondDimension.vars.valid or not form.thirdDimension.vars.valid %}error{% endif %}">
                    <div class="dimension">{{ form_widget(form.firstDimension) }}</div>
                    <div class="dimension">{{ form_widget(form.secondDimension) }}</div>
                    <div class="dimension">{{ form_widget(form.thirdDimension) }}</div>
                    <label>Wymiary (cm)</label>
                </div>
                <div class="form-group quantity {% if not form.quantity.vars.valid or not form.quantityType.vars.valid %}error{% endif %}">
                    {{ form_widget(form.quantity) }}
                    <div class="select">
                        {{ form_widget(form.quantityType) }}
                    </div>
                    <label>Ilość</label>
                    <div class="clear"></div>
                </div>
                <div class="info">
                    Koszt transportu drogowego zostanie podany przez konsultanta
                </div>
            </div>
        {% endif %}

        <div class="buttons form-group no-padding-top">
            <a href="javascript:" onclick="window.history.back();" class="back button blue"><div class="arrow-left"></div>Wstecz</a>
            <button class="send button pink" type="submit">
                <span class="move">Dalej</span>
            </button>
            <div class="clear"></div>
        </div>

        <div style="display: none;">
            {{ form_rest(form) }}
        </div>
    {{ form_end(form) }}

    <script>
        var symfonyCalculatorSecondUrl = "{{ url('app.order.second') }}";
    </script>
</div>
