<patient-flags :routes="routes"
               :initial-flags="(bootstrap && bootstrap.flags) ? bootstrap.flags : []"
               inline-template
>
    <div :class="{'formLoading' : loading}">
        <div class="cardTitle">
            <h3>Flags</h3>
            <div class="actions">
                <i class="fa fa-plus" @click="addFlag"></i>
            </div>
        </div>
        <div v-show="add" class="newForm">
            <div class="row">
                <input type="text"
                       name="flag"
                       v-model="flag"
                       placeholder="Enter flag"
                >
            </div>
            <div class="row">
                <input type="text"
                       class="datepicker short"
                       id="flagDue"
                       placeholder="Flag due? (DD/MM/YYYY)"
                >
            </div>
            <div class="row">
                <input type="checkbox"
                       class=""
                       id="flagTask"
                       v-model="isTask"
                >
                <label for="flagTask">
                    Is a task?
                </label>
            </div>
            <div class="row">
                <div v-if="errors['general']"
                     class="validationMessage"
                >
                    <span v-html="errors['general']"></span>
                </div>
            </div>
            <div class="row btn-section">
                <input type="button" class="btn button" value="Save" @click="store">
                <input type="button"
                       class="btn button"
                       value="Cancel"
                       id="btn_cancel"
                       @click="cancel()"
                >
            </div>
        </div>
        <template v-if="!add">
            <div class="row">
                <div class="success"
                     v-if="success"
                >
                    <span v-html="success"></span>
                </div>
            </div>
            <div class="recordsList" v-if="flags.length">
                <div class="flagItem" v-for="(flag, index) in flags">
                    <div class="flagContent">
                        <i class="fa fa-arrow-circle-o-right orange"
                           v-if="flag.status === 'todo'"
                           @click="toggleStatus(flag.id, 'complete')"
                        ></i>
                        <i class="fa fa-check-circle green"
                           v-if="flag.status === 'complete'"
                           @click="toggleStatus(flag.id, 'todo')"
                        ></i>
                        <span v-html="flag.content"></span>
                    </div>
                    <p class="detailsText">
                        <em>
                            Author:
                            <span v-html="flag.author"></span>
                            <template v-if="flag.datetime">
                                @ <span v-html="flag.datetime"></span>
                            </template>
                        </em>
                    </p>
                    <div v-if="flag.flag_due"
                         class="flagDate"
                    >
                        <span :class="'tag tag-' + flag.flagColour"
                              v-html="flag.flagDue"
                        ></span>
                    </div>
                    <template v-if="!flag.system">
                        <div v-if="deleteIndex == index"
                             class="red confirmDeletion"
                             @click="deleteFlag(flag.id)"
                        >
                            Confirm Deletion
                        </div>
                        <div class="actions" v-else>
                            <i class="fa fa-trash red deleteIcon"
                               @click="showConfirmDeletion(index)"
                            ></i>
                        </div>
                    </template>
                </div>
            </div>
            <p class="textMuted" v-else>
                <em>No flags on this patient</em>
            </p>
        </template>
    </div>
</patient-flags>
