<template>
    <div class="parentContainer">
        <div class="row">
            <div class="col">
                <div class="row m-b-20">
                    <div class="col">
                        <div class="font-heading fs-18 text-primary all-caps m-b-50">Select Address</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row  m-b-15">
            <div class="col">
                <loading-component style="height: 200px; top: 0;" color="success" v-show="isLoading"></loading-component>
                <list-component v-show="!isLoading" :section="section" :endpoint="route('api.address.list')" :options="{per_page: 5, HasMorphCompanyModule :company_module_id}">
                    <template slot="list" slot-scope="{data}">
                        <div class="row shadow p-3 mb-3 bg-white rounded">
                            <div class="col">
                                <div class="row">
                                    <div class="col">
                                        <address-component :section="section" v-bind:key="data.id" :data="data" :default="data.default"></address-component>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </list-component>
            </div>
        </div>

        <div class="row align-items-center justify-content-center">
            <div class="col">
                <div class="row">
                    <div class="col">
                        <button class="btn btn-sm btn-primary b-rad-none all-caps requestModal" data-type="addAddress">Add New Address</button>
                    </div>
                </div>
            </div>
        </div>
        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="addAddress">
            <new-edit-address-form-component :section="section" :address_id="-1"></new-edit-address-form-component>
        </modal-component>
    </div>
</template>

<script>
    export default {
        props: {
            section: {
                default: 'addressList'
            },
            company_module_id: {
                type: Number,
                default: 1
            },
        },
        data(){
            return {
                isLoading: false,
                item:{
                    id:null
                },
            }
        }
    }
</script>