<commit_before><template>
    <div class="modal-card">
        <header class="modal-card-head has-background-primary">
            <h2 class="modal-card-title has-text-white is-size-2">
                Title of Competency
            </h2>
            <button
                @click="$store.commit('app/closeModal')"
                class="delete"
                aria-label="close" />
        </header>
        <section class="modal-card-body">
            Thing goes here /// should include breadcrumbs
            This should probbaly be handled like a regular
            Should only be thing, no editing.  We will make the user
            go to the main framework to edit.
            <Component :is="Thing" />
        </section>
        <footer class="modal-card-foot">
            <div class="buttons is-spaced is-fullwidth">
                <button class="button is-outlined is-dark">
                    Navigate to parent framework
                </button>
                <button
                    @click="$store.commit('app/closeModal')"
                    class="button is-outlined is-primary">
                    Close Competency
                </button>
            </div>
        </footer>
    </div>
</template>

<script>
import Thing from '@/lode/components/lode/Thing.vue';

export default {
    name: 'Single',
    components: {Thing},
    data() {
        return {

        };
    },
    computed: {

    },
    methods: {

    },
    mounted() {

    }
};
</script><commit_msg>thing as property modal work CA-286<commit_after><template>
    <div class="single modal-card">
        <header class="modal-card-head has-background-primary">
            <p class="modal-card-title has-text-white is-size-2">
                {{ dynamicModalContent.parentName['@value'] }}
                <br>
                <br>
                <b>{{ dynamicModalContent.type }}</b>
            </p>
            <button
                @click="$store.commit('app/closeModal')"
                class="delete"
                aria-label="close" />
        </header>
        <section class="modal-card-body">
            <Component
                :is="dynamicThing"
                :uri="dynamicModalContent.uri"
                :expandInModal="true" />
            <div class="section">
                <h4 class="header">
                    This <b>{{ dynamicModalContent.type }}</b> is listed in <b>{{ numberOfParentFrameworks }}</b> frameworks
                </h4>
                <ul class="single__list">
                    <li
                        class="single__list-element"
                        v-for="(parentFramework, index) in parentFrameworks"
                        :key="index">
                        <a
                            :title="parentFramework.name"
                            class="single__li-a"
                            :href="parentFramework.url"
                            target="__blank">
                            <span>{{ parentFramework.name }}</span>
                            <div
                                :title="parentFramework.name"
                                class="button is-outlined is-small is-primary">
                                <span class="icon">
                                    <i class="fa fa-external-link-alt" />
                                </span>
                                <span>
                                    open
                                </span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </section>
        <footer class="modal-card-foot">
            <div class="buttons is-right is-fullwidth">
                <!--to do, make sure level is updated in framework after
                    edit is made -->
                <button
                    @click="edit=true"
                    class="button is-outlined is-primary"
                    v-if="dynamicModalContent.type==='Level'">
                    Edit {{ dynamicModalContent.type }}
                </button>
                <button
                    @click="$store.commit('app/closeModal')"
                    class="button is-outlined is-large is-primary">
                    return to framework editor
                </button>
            </div>
        </footer>
    </div>
</template>

<script>
import {mapState} from 'vuex';

import Thing from '@/lode/components/lode/Thing.vue';
import ThingEditing from '@/lode/components/lode/ThingEditing.vue';

export default {
    name: 'Single',
    components: {Thing, ThingEditing},
    data() {
        return {
            edit: false,
            numberOfParentFrameworks: 4,
            parentFrameworks: [
                {
                    name: 'this one',
                    url: 'https://cool.com'
                },
                {
                    name: 'this one',
                    url: 'https://cool.com'
                },
                {
                    name: 'this one',
                    url: 'https://cool.com'
                },
                {
                    name: '<NAME>',
                    url: 'https://cool.com'
                }
            ]
        };
    },
    computed: {
        ...mapState({
            framework: state => state.editor.framework,
            dynamicModalContent: state => state.app.modal.dynamicModalContent
        }),
        dynamicThing: function() {
            if (this.edit) {
                return 'ThingEditing';
            } else {
                return 'Thing';
            }
        }
    },
    methods: {

    },
    mounted() {

    }
};
</script>


<style lang="scss">
    @import '@/scss/variables.scss';

.single {
    .lode__thing {
        padding-left: 0rem;
        .field {
            padding-left: .25rem;
        }
    }
    .lode__thing:hover {
        padding-lefT: 0rem;
        color: $dark;
    }
    .lode__thing-editing {
        padding: 0;
        box-shadow: none;
        .field {
            padding-left: 0rem;
        }
    }
    .single__list {
        width: 100%;
        .single__list-element {
            padding: .25rem 0rem;
            .single__li-a {
                display: flex;
                flex-wrap: no-wrap;
                justify-content: space-between;
            }
        }
    }
}
</style>
{'fraction_non_alphanumeric': 0.1186148542776559, 'fraction_numerical': 0.0034471952366029457, 'mean_word_length': 1.087994766110566, 'pattern_counts': {'":': 0, '<': 78, '<?xml version=': 0, '>': 80, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1196124', 'n_tokens_mistral': 1700, 'n_tokens_neox': 1596, 'n_words': 335}