<template>
  <div class="base-manual">
    <div class="line-title-manual">
      <div
        class="padding-medium bottom-margin-medium background-white border-gray field-entry "
      >
        <div
          @click="toggleInstructions"
          class="flex flex-row middle-xs between-xs text-medium text-dark cursor-pointer"
        >
          <h2 class="h2-title" id="title">{{ title }}</h2>
          <!-- Mudar seta -->
          <button type="button">
            <i
              :class="[
                'fas',
                instructionsVisible ? 'fa-angle-up' : 'fa-angle-down',
                'text-gray',
                'vertical-middle',
              ]"
            ></i>
          </button>
        </div>

        <div
          class="flex flex-row middle-xs between-xs text-medium text-dark text-description"
        >
          <transition name="fade">
            <div
              v-show="instructionsVisible"
              class="top-padding-large limit-defined scroll-banner"
            >
              <slot></slot>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped src="./style.css"></style>
<script src="./script.js"></script>
