<%- include('../operationsContent/assets.ejs') %>
<main class="kt-ops" data-ops-page
  data-ops-required-message="<%= i18n.__('operationsContent.validationRequired') %>"
  data-ops-action-success="<%= i18n.__('contactUs.successReplySent') %>"
  data-ops-action-error="<%= i18n.__('contactUs.sendReplyErrorMessage') %>">
  <div class="kt-ops__stack">
    <%- include('../operationsContent/hero.ejs', {
      heading: contact.title || i18n.__('contactUs.contactus'),
      description: i18n.__('operationsContent.detailsDescription'),
      icon: 'ti-mail-opened', count: 0, showCount: false,
      primaryUrl: null, primaryLabel: null, backUrl: '/dashboard/contactUs'
    }) %>
    <section class="kt-ops-section">
      <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-user-circle"></i></span><div><h2><%= i18n.__('operationsContent.sender') %></h2><p><%= i18n.__('operationsContent.communication') %></p></div></header>
      <div class="kt-ops-section__body">
        <div class="kt-ops-details-grid">
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('contactUs.name') %></span><strong class="kt-ops-detail__value"><%= contact.name || i18n.__('operationsContent.noData') %></strong></div>
          <div class="kt-ops-detail" dir="ltr"><span class="kt-ops-detail__label"><%= i18n.__('contactUs.phone') %></span><strong class="kt-ops-detail__value">+<%= contact.countryCode || '' %> <%= contact.phone || i18n.__('operationsContent.noData') %></strong></div>
          <div class="kt-ops-detail" dir="ltr"><span class="kt-ops-detail__label"><%= i18n.__('contactUs.email') %></span><strong class="kt-ops-detail__value"><%= contact.email || i18n.__('operationsContent.noData') %></strong></div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('operationsContent.createdAt') %></span><strong class="kt-ops-detail__value"><%= contact.createdAt || i18n.__('operationsContent.noData') %></strong></div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('operationsContent.replyStatus') %></span><span class="kt-ops-status <%= contact.isReplies ? 'kt-ops-status--success' : 'kt-ops-status--warning' %>"><%= i18n.__(contact.isReplies ? 'operationsContent.replied' : 'operationsContent.notReplied') %></span></div>
        </div>
      </div>
    </section>
    <section class="kt-ops-section">
      <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-message"></i></span><div><h2><%= i18n.__('operationsContent.message') %></h2><p><%= contact.title || i18n.__('contactUs.messageTitle') %></p></div></header>
      <div class="kt-ops-section__body"><div class="kt-ops-content-block"><%= contact.message || i18n.__('operationsContent.noData') %></div></div>
    </section>
    <% if (contact.replies && contact.replies.length) { %>
      <section class="kt-ops-section">
        <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-messages"></i></span><div><h2><%= i18n.__('operationsContent.responses') %></h2><p><%= contact.replies.length %></p></div></header>
        <div class="kt-ops-section__body"><div class="kt-ops__stack">
          <% contact.replies.slice().reverse().forEach(function(reply) { %>
            <article class="kt-ops-detail"><span class="kt-ops-detail__label"><%= reply.repliedAt ? moment(reply.repliedAt).locale(lang).format('YYYY/MM/DD HH:mm') : i18n.__('operationsContent.noData') %></span><div class="kt-ops-content-block"><%= reply.message %></div></article>
          <% }) %>
        </div></div>
      </section>
    <% } %>
    <div class="kt-ops-details__footer">
      <button class="kt-ops-btn kt-ops-btn--primary" type="button" data-ops-modal-target="#contact-reply-modal"><i class="ti ti-send"></i><span><%= i18n.__('operationsContent.reply') %></span></button>
    </div>
  </div>
  <%- include('./reply.ejs', { contact, csrfToken }) %>
</main>
<%- include('../operationsContent/scripts.ejs') %>
