<templates>
  <t t-name="o-spreadsheet-ValidationMessages">
    <t t-if="this.props.messages">
      <t t-foreach="this.props.messages" t-as="msg" t-key="msg_index">
        <div t-att-class="this.divClasses" class="d-flex flex-column p-3 m-1 o-validation">
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
              <t t-if="this.props.msgType === 'info'" t-call="o-spreadsheet-Icon.CIRCLE_INFO"/>
              <t t-else="" t-call="o-spreadsheet-Icon.TRIANGLE_EXCLAMATION"/>
            </div>
            <div class="d-flex flex-column overflow-hidden">
              <span class="ps-2" t-out="msg"/>
            </div>
          </div>
        </div>
      </t>
    </t>
    <t t-if="this.props.slots and this.props.slots['info-text']">
      <div t-att-class="this.divClasses" class="d-flex flex-column p-3 m-1 o-validation">
        <div class="d-flex align-items-center">
          <div class="flex-shrink-0">
            <t t-if="this.props.msgType === 'info'" t-call="o-spreadsheet-Icon.CIRCLE_INFO"/>
            <t t-else="" t-call="o-spreadsheet-Icon.TRIANGLE_EXCLAMATION"/>
          </div>
          <div class="d-flex flex-column overflow-hidden">
            <span class="ps-2" t-call-slot="info-text"/>
          </div>
        </div>
      </div>
    </t>
  </t>
</templates>
