{{ form_start(form, { action: '//first-step-url//', attr: { novalidate: 'novalidate', 'data-symfony-calculator': true } }) }}
    <div class="form-group loading">
        <label>Port załadunku<a href="javascript:" data-hint-name="loading">?</a></label>
        {{ form_widget(form.loading) }}
    </div>
    <div class="form-group unloading">
        <label>Port wyładunku<a href="javascript:" data-hint-name="unloading">?</a></label>
        {{ form_widget(form.unloading) }}
    </div>
    <div class="form-group volume">
        <div class="cubic-calculator small-popup">
            <div class="arrow-down"></div>

            <div class="form-group">
                <label>Długość <span class="small">(cm)</span></label>
                <input type="text" value="10">
            </div>
            <div class="form-group ml">
                <label>Wysokość <span class="small">(cm)</span></label>
                <input type="text" value="10">
            </div>
            <div class="clear"></div>
            <div class="form-group">
                <label>Szerokość <span class="small">(cm)</span></label>
                <input type="text" value="10">
            </div>
            <div class="form-group ml submit">
                <button class="button pink" type="button">Dalej</button>
            </div>
        </div>

        <label>Objętość <span class="small"><a href="javascript:" class="cubic">(oblicz)</a></span></label>
        {{ form_widget(form.volume, { attr: { 'data-cubic-result': 'true' } }) }}
        <div class="unit">m3</div>
    </div>
    <div class="form-group weight">
        <label>Waga</label>
        <div class="inputs">
            <input type="text" id="weight" required="required" placeholder="{{ form.weight.vars.attr.placeholder }}">
            {{ form_widget(form.weight) }}
            <div class="select">
                <select id="unit" style="display:none;">
                    <option value="kg">kg</option>
                    <option value="lbs">lbs</option>
                </select>
            </div>
        </div>
    </div>
    <div class="clear-or-not-to-clear"></div>

    <div class="info-kontenery">
        Oblicz koszt transportu na <a href="http://kontener.pl" target="_blank">kontener.pl</a>
    </div>

    <div class="form-group sum">
        Fracht morski: <strong><span id="cost-value">0</span>,- USD</strong>
    </div>
    <div class="form-group buttons">
        <button class="button pink" type="submit">
            <span class="move">Dalej</span>

            <div class="kontenery">
                Twoja przesyłka jest zbyt duża,
                przejdź do serwisu <strong>KONTENER.PL</strong>
            </div>

            <div class="arrow-right"></div>
        </button>
    </div>
    <div class="form-group info">
        Ładunki obsługuje Morska Agencja Gdynia Sp. Z o.o.
    </div>
    <div class="clear"></div>
{{ form_end(form) }}

<script>
    var connectionsUrl = "{{ url('app.order.connections') }}";
    var symfonyCalculatorUrl = "{{ url('app.order.first') }}";
</script>