# Discipline specific content

<div class="app">
  <v-data v-slot="state" :data="{discipline: {id: 1, name: 'Alutømrer'}, dirty: false}">
    <v-card elevated bg-variant="white">
      <v-ribbon position="right">Til dig</v-ribbon>
      <v-fetch v-slot="response" :url="`/api/content.json?disciplineId=${state.discipline.id}`">
        <div v-if="response.ok">
          <v-text class="mb-4" font-size="6" bold>
            Særligt for <span class="text-primary">{{state.discipline.name}}</span>
          </v-text>
          <v-alerts v-if="state.dirty" class="mb-4" font-size="7" info>
            <v-alert>
              <v-text font-size="2">
                Hvis du ikke længere er <span class="text-lowercase">{{state.discipline.name}}</span> beder vi dig venligst oprette en ny arbejdsplads på Mit 3F, så vi kan give dig den bedst mulige hjælp til netop dit fag.
                <a href="#" class="font-weight-bold">Opret arbejdsplads</a>
              </v-text>
            </v-alert>
          </v-alerts>
          <div v-html="response.data.content"></div>
          <v-accordion-group class="mt-5">
            <v-accordion v-for="(item, index) in response.data.accordion" :title="item.title" :key="index">
              {{item.text}}
            </v-accordion>
          </v-accordion-group>
        </div>
      </v-fetch>
      <v-fetch v-slot="response" :url="'/api/disciplines.json'">
        <div v-if="response.ok">
          <div class="row align-items-center mt-6">
            <div class="col">
              <v-text font-size="2" class="text-sm-left text-md-right text-gray-dark">
                Få særlig viden indenfor dit fag:
              </v-text>
            </div>
            <div class="col-sm-12 col-md-6 col-xl-4 mt-sm-2 mt-md-0">
              <v-searchable-select placeholder="Vælg dit fag" :options="response.data" :value="state.discipline" option-id="id" label="name" @input="state.discipline = $event.target.value; state.dirty = true"></v-searchable-select>
            </div>
          </div>
        </div>
      </v-fetch>
    </v-card>
  </v-data>
</div>