{% set field_class = field_class|default('input-info input-md placeholder-gray-400') %}
{% set label_class = label_class|default('font-semibold') %}
<form 
    class="ui form {{ class|default('p-2') }}" 
    id="{{ id|default('address_form') }}">  
    <input type="hidden" name="uuid" id="uuid" value="{{ address.uuid }}">  
    <input type="hidden" name="type" id="address_type" value="{{ type|default(address.type) }}"> 
    {% for key, field in input_fields %}
        <input type="hidden" name="{{ key }}" id="{{ key }}" value="{{ field }}">  
    {% endfor %}
    {% if show_type == true %}
    <div class="my-2">
        <div class="badge">
            {{ labels.type }}
            <div class="detail">
                {{ address.type }}
            </div>
        </div>
    </div>   
    {% endif %}   
    {% if show_names == true %}
    <div class="flex flex-row items-center">
        <div class="px-1 form-control field w-1/2">
            <label class="{{ label_class }}">
                {{ fields.first_name.label }}
            </label>
            <input 
                class="input {{ field_class }}"
                {{ rules.first_name|attr('rule') }} 
                name="first_name" id="first_name" 
                {{ fields.first_name.placeholder|attr('placeholder') }} 
                value="{{ address.first_name }}">
        </div> 
        <div class="px-1 form-control field w-1/2">
            <label class="{{ label_class }}">
                {{ fields.last_name.label }}
            </label>
            <input 
                class="input {{ field_class }}"
                {{ rules.last_name|attr('rule') }} 
                name="last_name" id="last_name" 
                {{ fields.last_name.placeholder|attr('placeholder') }} 
                value="{{ address.last_name }}">
        </div>
    </div>
    {% endif %}
    <div class="mt-2 flex flex-row items-start">
        {% if hide_email != true %}
        <div class="px-1 form-control field w-1/2">
            <label class="{{ label_class }}">
                {{ fields.email.label }}
            </label>
            <input 
                class="input {{ field_class }}"
                rule="email" 
                optional="true" 
                name="email" 
                id="email" 
                {{ fields.email.placeholder|attr('placeholder') }} 
                value="{{ address.email }}">
        </div>
        {% endif %}
        {% if hide_phone != true %}
        <div class="px-1 form-control field w-1/2">
            <label class="{{ label_class }}">
                {{ fields.phone.label }}
            </label>
            <input 
                class="input {{ field_class }}"
                rule="integer" 
                name="phone" 
                id="phone" 
                optional="true" 
                {{ fields.phone.placeholder|attr('placeholder') }} 
                value="{{ address.phone }}">
        </div>
        {% endif %}
    </div>   
    <div class="my-2 px-1 form-control field required">
        <label class="{{ label_class }}">
            {{ fields.address.label }}
        </label>
        <div class="w-full indicator tooltip" data-tip="{{ labels.required }}">
            <span class="indicator-item badge badge-secondary badge-xs"></span>
            <input 
                class="w-full input {{ field_class }}"
                rule="empty" 
                name="address" 
                id="address" 
                {{ fields.address.placeholder|attr('placeholder') }} 
                value="{{ address.address }}">
        </div>
    </div>  
    <div class="my-2 px-1 form-control field">
        <label class="{{ label_class }}">
            {{ fields.address2.label }}
        </label>
        <input 
            class="input {{ field_class }}"
            type="text" 
            name="address_2" 
            id="address_2" 
            {{ fields.address2.placeholder|attr('placeholder') }} 
            value="{{ address.address_2 }}">  
    </div>   
    <div class="my-2 flex flex-row items-start">
        <div class="px-1 form-control field w-1/2">
            <label class="{{ label_class }}">
                {{ fields.city.label }}
            </label>
            <input 
                class="input {{ field_class }}"
                type="text" 
                name="custom_city" 
                id="custom_city" 
                value="{{ address.custom_city }}">       
        </div> 
        <div class="px-1 form-control field w-1/2">
            <label class="{{ label_class }}">
                {{ fields.zip.label }}
            </label>
            <input 
                class="input {{ field_class }}"
                name="zip_code" 
                id="zip_code" 
                {{ fields.zip.placeholder|attr('placeholder') }} 
                value="{{ address.zip_code }}">
        </div>
    </div>
    <div class="my-2 flex flex-row items-start">
        {% if hide_country != true %}
        <div class="px-1 form-control field w-1/2">
            <label class="{{ label_class }}">
                {{ fields.country.label }}
            </label>
            {{  component('tailwind~address.country',{ 
                    selected: address.country_id|default(country_code), 
                    data_field: 'id',   
                    class: 'mini',                
                    name: 'country_id'
                }) 
            }} 
        </div>   
        {% endif %}
        {% if hide_state != true %}
        <div class="px-1 form-control field w-1/2">
            <label class="{{ label_class }}">
                {{ fields.state.label }}
            </label>
            <div id="state_content" class="w-full">
                {{  component('tailwind~address.state',{ 
                        selected: address.state_id|default(state_code), 
                        country_code: address.country.code|default(country_code),
                        data_field: 'id',
                        name: 'state_id',
                        class: 'mini w-full' 
                    }) 
                }} 
            </div>           
        </div> 
        {% endif %}
    </div>
    {% if show_website == true %}
    <div class="my-2 px-1 form-control field">
        <label class="{{ label_class }}">
            {{ fields.website.label }}
        </label>
        <input 
            class="input {{ field_class }}"
            rule="url" 
            optional="true" 
            name="website" 
            id="website" 
            {{ fields.website.placeholder|attr('placeholder') }} 
            value="{{ address.website }}">
    </div>
    {% endif %}
    {% if hide_submit != true %}
    <div class="my-2 px-1">
        {{ component('tailwind~form.footer',{ button: submit_button }) }}   
    </div>    
    {% endif %}
</form>