<script type="text/x-template" id="translation-item"> <div class="card bg-light mb-2"> <div class="card-header"> [<span class="text-danger" v-text="translationKey"></span>] [<span class="text-muted" v-text="defaultTranslationText"></span>] <span class="pull-right mr-2"> [<span class="text-danger" v-text="locale"></span>] </span> <span class="pull-right"> [<span class="text-danger" v-text="domain"></span>] </span> </div> <div class="card-body"> <textarea rows="3" v-show="state === 'editing'" v-model="value" class="form-control" ref="editField"></textarea> <p v-if="state === 'display'" v-html="value" class="card-text d-inline-block"></p> <i v-if="state === 'display'" class="fa fa-pencil-square-o text-info" @click="state = 'editing'" style="cursor: pointer; font-size: 1.5em"></i> <i v-if="state === 'editing'" class="fa fa-save text-info" @click="save" style="cursor: pointer; font-size: 1.5em"></i> <i v-if="state === 'editing'" class="fa fa-window-close text-danger" @click="cancel" style="cursor: pointer; font-size: 1.5em"></i> </div> </div></script>