
  <div class="container-relative content-box background-info rounded-x-large shadow-medium">
    <div class="container-absolute content-box background-white rounded-x-large shadow-medium padding-large">
      {% if schedule.has_order == true %}

        <span class="top-margin-medium text-dark-opacity text-large text-bold text-break-word">{{ schedule.name }}</span>
        
        <div class="width-fit background-success padding-x-small rounded-large top-margin-x-small">
          <span class="text-success text-bold text-x-small">{{ schedule.status }}</span>
        </div>

        <div class="flex start-xs gap-6 vertical-margin-medium">
          {% for item in schedule.schedule_times %}
            <div class="flex-col">
              <p class="text-dark-opacity text-x-small text-bold">{{ item.title }}</p>
              <p class="text-dark-opacity text-small ">{{ item.info }}</p>
            </div>
          {% endfor %}  
        </div>

        <a href="{{ schedule.url }}" target="_blank" class="btn-default btn-small width-fit button-order-schedule">
          <span>Consultar agendas</span>
        </a>

      {% else %}

        <div class="flex start-xs middle-xs gap-1 bottom-margin-medium">
          <i class="fas fa-exclamation-triangle text-warning" />
          <span class="text-warning text-large text-bold ">Atenção</span>
        </div>  

        <p class="bottom-margin-medium text-dark-opacity text-medium">Este pedido não contém agendamento. Consulte as agendas disponíveis pelo botão abaixo</p> 

        <a href="{{ schedule.url }}" target="_blank" class="btn-default btn-small width-fit button-order-schedule">
          <span>Consultar agendas</span>
        </a>

      {% endif %}
  </div>
</div>


<style>
.container-relative {
  position: relative;
  width: 360px;
  height: 200px;
}

.container-absolute {
  position: absolute;
  top: 10%;
  left: 7.5%;
  width: 360px;
  height: 200px;
}  

.button-order-schedule {
  background-color: #D9EDF2;
  color: rgba(0, 0, 0, 0.8);
  font-weight: bold;
}
</style>