<template>
    <div class="row m-b-15 parentContainer">
        <div class="col">
            <div class="row align-items-center">
                <div class="col">
                    <div class="row">
                        <div class="col-auto p-r-10">
                            <div class="font-heading all-caps fs-8 muted">Name</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading all-caps fs-10">{{item.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row align-items-center">
                <div class="col">
                    <div class="row">
                        <div class="col-auto p-r-10">
                            <div class="font-heading all-caps fs-8 muted">Description</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading all-caps fs-10">{{item.description}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row align-items-center">
                <div class="col">
                    <div class="row">
                        <div class="col-auto p-r-10">
                            <div class="font-heading all-caps fs-8 muted">No of Milestones</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading all-caps fs-10">{{item.milestones.length}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-auto parentContainer">
            <div class="row align-items-center">
                <div class="col-auto no-padding">
                    <button class="btn btn-xs btn-primary b-rad-none requestModal" data-type="createModal">
                        <i class="fa fa-plus m-r-5"></i>
                        Edit
                    </button>
                    <button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="deleteReward">
                        <i class="fa fa-times"></i>
                    </button>
                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteReward">
                        <delete-reward-form-component :data="item" :section="section" class="text-center"></delete-reward-form-component>
                    </modal-component>
                </div>
            </div>
            <modal-form-component size="large" section="rewardsSection">
                <template slot="form" slot-scope="{section}">
                    <add-reward-form-component :data="data" :section="section" :options-is-active="optionsIsActive" :options-type="optionsType"></add-reward-form-component>
                </template>
            </modal-form-component>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props: {
            section: {
                default: 'rewardsSection'
            },
            optionsIsActive: {
                type: Array,
                required: true
            },
            optionsType: {
                type: Array,
                required: true
            }
        },
        mixins: [componentHandler]
    }
</script>
