<div id="welcome" v-cloak>

    <account-notification-banner></account-notification-banner>

    <div class="container-fluid px-5">

        <%
        // model/User.js
        // ...
        // profile: {
        //     type: 'string',
        //             isIn: ['congregant','member', 'deacon', 'priest', 'administrator'],
        //             defaultsTo: 'congregant'
        // },
        %>

        <cc-card-list name="<%= __('Modules') %>">

            <cc-card v-for="service in services" :href="service.href" :title="service.title"
                :description="service.description" />

        </cc-card-list>

        <cc-card-list name="<%= __('My Churches') %>">
            <!-- TODO: move this warning to be generated in the backend -->
            <!-- TODO: move to the top of the page ?-->

            <template v-if="temples.length < 1">
                <cc-warning message="<%= __('No Main Church created yet! Please, create one at [Manage Churchs]') %>" />
            </template>

            <template v-else-if="temples.length > 0">
                <!-- Churches user belongs to -->
                <cc-card v-for="church in myChurchs" :title="church.shortName" :description="church.address" href="#" />
            </template>

            <template v-else>
                <cc-card title="<%= __('Join Church') %>" description="<%= __(`Select a Church to join in`) %>"
                    href="#" />
            </template>

        </cc-card-list>

        <cc-card-list name="<%= __('My Groups') %>">

            <cc-card
                title="<%= __('Join Group') %>"
                href="/classe/search-classe"
                description="<%= __(`Select a Group to join and start learning`) %>"
            />

            <!-- List of groups user belongs to -->
            <cc-card v-for="classroom in user.classrooms"
                :title="classroom.name"
                :description="classroom.local"
                href="/classe/search-classe"
            />

        </cc-card-list>

        <hr>

        <!-- TODO: move this to its own page -->
        <!-- <section id="join-church">
            <div v-if="showChurchList">
                <div class="card mt-2">
                    <div class="card-header">
                        <%= __('Church') %>
                            <%= __('Select') %>
                    </div>
                    <div class="card-body">
                        <select name="church" id="church" class="form-select" v-model="churchSelecionadaId">
                            <% temples.forEach(temple=> { %>
                                <option value="<%= temple.id %>" label="<%= temple.fullName %> - <%= temple.tipo %>">
                                </option>
                                <% }) %>
                        </select>
                    </div>
                    <div class="card-footer">
                        <button type="button" class="btn btn-primary m-1" data-bs-dismiss="modal"
                            @click="selecionarChurch(churchSelecionadaId)">
                            <%= __('Select') %>
                        </button>
                        <a href="/welcome" class="btn btn-primary">
                            <%= __('Close') %>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <section id="join-classroom">
            <div v-if="showGroupList">
                <div class="card mt-2">
                    <div class="card-header">
                        <%= __('Group') %>
                            <%= __('Select') %>
                    </div>
                    <div class="card-body">
                        <select name="group" id="group" class="form-select" v-model="groupSelecionadaId">
                            <% groups.forEach( group=> { %>
                                <option value="<%= group.id %>" label="<%= group.name %>"></option>
                                <% }) %>
                        </select>
                    </div>
                    <div class="card-footer">
                        <button type="button" class="btn btn-primary m-1" data-bs-dismiss="modal"
                            @click="selecionarGroup(groupSelecionadaId)">
                            <%= __('Select') %>
                        </button>
                        <a href="/welcome" class="btn btn-primary">
                            <%= __('Close') %>
                        </a>
                    </div>
                </div>
            </div>

        </section> -->

    </div>

    <message id="msg" v-on:close="update()" :severity="message.severity" v-bind:summary="message.summary"
        :details="message.details"></message>

    <router-view></router-view>
</div>



<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>
