NoteCard.html

<div class="box" xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <article class="media">
    <div class="media-content">
      <div class="content">
        <div id="card-header" class="columns">
          <div id="name-category" class="column is-9">
            <h4 v-if="gistsSelected">{{ note.description }}
              <b-icon class="visibility-icon" :icon="note.public ? 'globe': 'lock'"></b-icon>
            </h4>
            <h3 v-else>{{ note.name }}</h3>
          </div>
          <div id="action-buttons" class="column is-3">
            <div class="is-pulled-right">
              <a id="link-note" v-if="gistsSelected" @click="open(note.url)" title="Show on Github">
                <b-icon icon="github"></b-icon>
              </a>
              <a id="update-note" @click="updateNoteModalActive = true" title="Edit note">
                <b-icon icon="pencil"></b-icon>
              </a>
              <a id="delete-note" @click="deleteNoteModal()" title="Delete note">
                <b-icon icon="trash"></b-icon>
              </a>
            </div>
          </div>
        </div>
        <p v-if="!gistsSelected">{{note.description}}</p>

        <b-tag type="is-dark" v-for="tag in note.tags" :data="tag" :style="'background-color: ' + stringToColour(tag) + ';'"
               :key="tag.text">{{tag}}</b-tag>

        <div class="note-file" v-for="(value, key, index) in note.files">
          <h4>{{value.name}}
            <span class="note-file-small">({{value.language}})
              <a id="copy-file"
                 v-clipboard:copy="value.content"
                 v-clipboard:success="onCopyClipboardSuccess"
                 title="Copy to clipboard">
                <b-icon icon="clipboard"></b-icon>
              </a>
              <a id="export-carbon" @click="exportToCarbon(value.content)" title="Export to Carbon">
                <b-icon icon="image"></b-icon>
              </a>
            </span>
          </h4>
          <editor :code="value.content"
                  :lang="value.language"
                  theme="monokai"
                  width="100%"
                  :auto-grow="true"
                  :readOnly="true"
          ></editor>
        </div>
      </div>
    </div>
  </article>

  <b-modal :active.sync="updateNoteModalActive" has-modal-card>
    <cn-update-note-modal :note="note"></cn-update-note-modal>
  </b-modal>
</div>