<commit_before><template>
    <div id="notifications-container">
        <div class="notification ely-card" v-for="notification in notifications">
            <show-question-request :notification="notification" v-if="notification.type === 'showQuestionRequest'">
            </show-question-request>
            <add-to-trust-circle :notification="notification" v-if="notification.type === 'addedToTrustCircle'">
            </add-to-trust-circle>
            <watch-commitment :notification="notification" v-if="notification.type === 'watchingCommitment'">
            </watch-commitment>
            <watch-question :notification="notification" v-if="notification.type === 'watchingQuestion'">
            </watch-question>
            <created-answer :notification="notification" v-if="notification.type === 'createdAnswer'">
            </created-answer>
        </div>
        <div id="no-notifications" class="ely-card" v-if="notifications.length === 0">
            {{$t("pages:notifications.noNotifications")}}
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    import ShowQuestionRequest from './ShowQuestionRequest';
    import AddToTrustCircle from './AddToTrustCircle';
    import WatchCommitment from './WatchCommitment';
    import WatchQuestion from './WatchQuestion';
    import CreatedAnswer from './CreatedAnswer';

    export default {
        name: "notifications",
        components: {ShowQuestionRequest, AddToTrustCircle, WatchCommitment, WatchQuestion, CreatedAnswer},
        computed: {
            ...mapGetters({
                notifications: 'notification/notifications'
            })
        },
    }
</script>

<style lang="scss">
    #notifications-container {
        .notification {
            margin-bottom: 12px;
            .notification-created {
                margin-bottom: 8px;
                font-size: 12px;
                color: $secondary-text;
            }
        }
        .show-border {
            border-bottom: 1px solid #e0e0e0;
        }
        #no-notifications {
            padding: 16px;<commit_msg>Added mobile ready css media queries.<commit_after><template>
    <div id="notifications-container">
        <div class="notification ely-card" v-for="notification in notifications">
            <show-question-request :notification="notification" v-if="notification.type === 'showQuestionRequest'">
            </show-question-request>
            <add-to-trust-circle :notification="notification" v-if="notification.type === 'addedToTrustCircle'">
            </add-to-trust-circle>
            <watch-commitment :notification="notification" v-if="notification.type === 'watchingCommitment'">
            </watch-commitment>
            <watch-question :notification="notification" v-if="notification.type === 'watchingQuestion'">
            </watch-question>
            <created-answer :notification="notification" v-if="notification.type === 'createdAnswer'">
            </created-answer>
        </div>
        <div id="no-notifications" class="ely-card" v-if="notifications.length === 0">
            {{$t("pages:notifications.noNotifications")}}
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    import ShowQuestionRequest from './ShowQuestionRequest';
    import AddToTrustCircle from './AddToTrustCircle';
    import WatchCommitment from './WatchCommitment';
    import WatchQuestion from './WatchQuestion';
    import CreatedAnswer from './CreatedAnswer';

    export default {
        name: "notifications",
        components: {ShowQuestionRequest, AddToTrustCircle, WatchCommitment, WatchQuestion, CreatedAnswer},
        computed: {
            ...mapGetters({
                notifications: 'notification/notifications'
            })
        },
    }
</script>

<style lang="scss">
    #notifications-container {
        .notification {
            margin-bottom: 12px;
            @media screen and (max-width: $sm) {
                padding: 16px;
                margin-bottom: 0;
            }
            .notification-created {
                margin-bottom: 8px;
                font-size: 12px;
            }
        }
        .show-border {
            border-bottom: 1px solid #e0e0e0;
        }
        #no-notifications {
            padding: 16px;
{'fraction_non_alphanumeric': 0.13095788986580287, 'fraction_numerical': 0.006247107820453493, 'mean_word_length': 2.3126436781609194, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 45, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4435496', 'n_tokens_mistral': 1174, 'n_tokens_neox': 1118, 'n_words': 221}