<div class="_CSS-boardcard"
    :class="{ '_CSS-boardcard--with-background': !params.withoutBackground}"
    @click.stop="$emit('selected', document)"
    :style="[data.erledigt == true? {color: 'var(--ae-background-300)'} : {}]">

    <div class="_CSS-boardcard--top">
        <div class="_CSS-boardcard-text _CSS-boards-text--multilineOverflow">
            <ae-design name="title" :document="document"></ae-design>
        </div>

        <div class="_CSS-boardcard-img--wrapper" v-if="data.verantwortlich && data.verantwortlich.length">
            <ae-design title="Verantwortliche" class="_CSS-boardcard-img" name="avatar--tiny"
                :document-id="data.verantwortlich[0].id"></ae-design>
            <ae-design class="_CSS-boardcard-img" v-if="data.verantwortlich.length === 2" name="avatar--tiny"
                :document-id="data.verantwortlich[1].id"></ae-design>

            <div :title="locals.tooltipWeitereVerantwortliche">
                <ae-design class="_CSS-boardcard-img" v-if="data.verantwortlich.length > 2" name="avatar--tiny"
                    :document-id="data.verantwortlich[1].id"
                    :param-overwrite-display-with="'+' + (data.verantwortlich.length - 1)"
                    :title="locals.tooltipWeitereVerantwortliche"></ae-design>
            </div>
        </div>
    </div>

    <div class="_CSS-boardcard--bottom">
        <div v-if="data.bis != ''" class="_CSS-boardcard-date">
            {{controller.date}}
        </div>

        <div :style="[Aeppic.DateTime.fromISO(data.bis).diffNow('days').days < 0 ? {color: 'var(--ae-accent-red-600)'} : {color: 'var(--ae-accent-green-600)'}]"
            class="_CSS-boardcard-timespan" v-if="data.bis != ''">
            {{controller.remnantDurration}}
        </div>

        <div title="Anhänge">
            <ae-icon class="fal fa-paperclip _CSS-boardcard-icon" v-if="data.anhaenge.length"></ae-icon>
        </div>
        <div title="Kommentare">
            <ae-icon class="fal fa-comment _CSS-boardcard-icon" v-if="locals.comments.length > 0"></ae-icon>
        </div>
        <div :title="locals.readableDuration" v-if="locals.duration">
            <ae-icon class="fal fa-clock _CSS-boardcard-icon"> </ae-icon>
        </div>

        <template v-if="data.prioritaet">
            <div title="Hohe Priorität" v-if="data.prioritaet === 3">
                <ae-icon class="fal fa-arrow-circle-up _CSS-boardcard-icon"></ae-icon>
            </div>
            <div title="Mittlere Priorität" v-else-if="data.prioritaet === 2">
                <ae-icon class="fal fa-circle _CSS-boardcard-icon"></ae-icon>
            </div>
            <div title="Niedrige Priorität" v-else-if="data.prioritaet === 1">
                <ae-icon class="fal fa-arrow-circle-down _CSS-boardcard-icon" </ae-icon>
            </div>
        </template>
    </div>
</div>