<template>
    <modal
      name="show-applicant-ids-modal"
      height="auto"
      scrollable
      draggable
    >
    <div class="bg-light p-1 text-uppercase">Applicant Id's</div>
    <div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Application Id</th>
                    <td>{{ applicationId }}</td>
                </tr>
                <tr>
                    <th>Net Id</th>
                    <td>{{ netId }}</td>
                </tr>
                <tr>
                    <th>Byu Id</th>
                    <td>{{ applicantId }}</td>
                </tr>
                <tr>
                    <th>Person Id</th>
                    <td>{{ personId }}</td>
                </tr>
                <tr>
                    <th>Central Processing Id</th>
                    <td>{{ cpId }}</td>
                </tr>
                <tr>
                    <th>Rsvp Id</th>
                    <td>{{ rsvpId }}</td>
                </tr>
                <tr>
                    <th>Ces Id</th>
                    <td>{{ cesId }}</td>
                </tr>
                <tr>
                    <th>Pathway Id</th>
                    <td>{{ pathId }}</td>
                </tr>
                <tr>
                    <th>Church Account Id</th>
                    <td>{{ churchAccountId }}</td>
                </tr>
                <tr>
                    <th>Church Account Username</th>
                    <td>{{ churchUserName }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <span class="modal-footer">
        <button @click="close" type="button" class="btn btn-sm btn-outline-danger">Close</button>
    </span>
    </modal>
</template>
<script>
    import { mapState } from 'vuex'

    export default {
        name: 'ShowApplicantIds',
        computed:{
            ...mapState({
                netId: state => state.application.netId,
                applicantId: state => state.application.applicantId,
                personId: state => state.application.personId,
                cpId: state => state.newApp.cpId,
                rsvpId: state => state.newApp.rsvpId,
                cesId: state => state.newApp.cesId,
                applicationId: state => state.newApp.appId,
                pathId: state => state.newApp.pathId,
                churchAccountId: state => state.newApp.churchAccountId,
                churchUserName: state => state.newApp.churchUserName,
            })
        },
        methods: {
            close () {
                this.$modal.hide('show-applicant-ids-modal')
            },
        }
    }
</script>
<style scoped>
    .applicant {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr 1fr;
        grid-column-gap: 0.5rem;
    }

</style>
