<link href="{{ STATIC_URL }}shipping/css/shipping.css" type="text/css" media="screen" rel="stylesheet"/>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type='text/javascript' src='{{STATIC_URL}}shipping/js/shipping.freight.js'></script>

<div id='shipping-freight'>
    <form>
        {% csrf_token %}
        <p class='clearfix'>
            <label>{{_('Choose a country')}}</label>
            <select name='country_code'>
                {% for country in countries %}
                    <option value='{{country.iso}}' fulladdress='{{country.needs_full_address}}'>{{country.name}}</option>
                {% endfor %}
            </select>
        </p>
        <div class='shipping-full-address'>
            <p class='clearfix'>
                <label>{{_('Address 1')}}</label>
                <input type='text' name='address_1' />
            </p>
            <p class='clearfix'>
                <label>{{_('Address 2')}}</label>
                <input type='text' name='address_2' />
            </p>
            <p class='clearfix'>
                <label>{{_('City')}}</label>
                <input type='text' name='city' />
            </p>
            <p class='clearfix shipping-states'>
                <label>{{_('State')}}</label><span><span>
            </p>        
        </div>
        <p  class='clearfix'>
            <label>{{_('Zip code')}}</label>
            <input type='text' name='zipcode' />
        </p>
        <input type='hidden' name='dimensions' value='10x10x2x0.8' />
        <input type='hidden' name='dimensions' value='10x20x3x0.2' />
    </form>
    <span class='shipping-loader'><img src='{{STATIC_URL}}shipping/img/loading.gif' /></span>


    <div class='shipping-freight-cost'></div>
    <a class='button calculate' href='#'>calculate</a>
</div>

<script type='text/javascript'>
    $(document).ready(function(){
        $("#shipping-freight").shippingFreight();
    })
</script>