<template>
    <div class="hello">
        <h1>Modèles d'Email</h1>
        <h2>Templates d'email potentiellement pré-rempli à usage professionnel et personnel !</h2>
        <select v-model="selected" v-on:change="selectEmail">
            <option v-for="template in emails" :value="template.slug" :key="template.slug">
                {{ template.name }}
            </option>
        </select>
        <div v-if="email != null">
            <h4 class="email-subject">Sujet : {{ email.subject }}</h4>
            <nl2br tag="p" :text="email.body" class-name="email-body"></nl2br>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import VueResource from 'vue-resource';
    import Nl2br from 'vue-nl2br';

    Vue.component('nl2br', Nl2br);
    Vue.use(VueResource);

    export default {
        name: "EmailModel",
        components: {
            Nl2br
        },
        data: function() {
            return {
                emails: [],
                selected: "",
                email: null
            }
        },
        beforeCreate() {
            let $this = this;
            Vue.http.get("emails.php").then(response => {
                $this.emails = response.body
            });
        },
        methods: {
            selectEmail: function() {
                let $this = this;
                Vue.http.post("email.php", {"slug": $this.selected}).then(response => {
                    $this.email = response.body;
                    // $this.email.body.replace(/(\r\n|\n\r|\r|\n)/g, '<br>$1');
                });
            }
        }
    }
</script>

<style scoped>
    h3 {
        margin: 40px 0 0;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
    .email-subject, .email-body {
        text-align: left;
    }
</style>