<%- include('../systemFinance/assets.ejs') %>
<main class="kt-ops kt-finance" data-ops-page data-finance-page
  data-ops-required-message="<%= i18n.__('systemFinance.required') %>"
  data-ops-action-success="<%= i18n.__('common.editSuccessful') %>"
  data-ops-action-error="<%= i18n.__('common.returnDeveloper') %>">
  <div class="kt-ops__stack">
    <%- include('../systemFinance/hero.ejs', {
      heading: i18n.__('sms.messages'),
      description: i18n.__('systemFinance.smsDescription'),
      icon: 'ti-message-cog',
      count: sms.length,
      primaryUrl: null,
      backUrl: null
    }) %>

    <section class="kt-ops-toolbar" aria-label="<%= i18n.__('systemFinance.commandCenter') %>">
      <div class="kt-ops-toolbar__main">
        <span class="kt-ops-section-icon" aria-hidden="true"><i class="ti ti-shield-lock"></i></span>
        <div><h2><%= i18n.__('systemFinance.commandCenter') %></h2><p><%= i18n.__('systemFinance.credentialsHint') %></p></div>
      </div>
    </section>

    <section class="kt-ops-resource">
      <% if (!sms.length) { %>
        <%- include('../systemFinance/empty.ejs', {
          icon: 'ti-message-off',
          heading: i18n.__('systemFinance.noData'),
          description: i18n.__('systemFinance.noSmsGateways'),
          addUrl: null,
          addLabel: null
        }) %>
      <% } else { %>
        <div class="kt-finance-gateways">
          <% sms.forEach((item, index) => { const active = item.active === 'yes'; %>
            <article class="kt-finance-gateway <%= active ? 'kt-ops-row--success' : '' %>">
              <header class="kt-finance-gateway__head">
                <div class="kt-finance-gateway__identity">
                  <span class="kt-ops-avatar" aria-hidden="true"><i class="ti ti-message-2-code"></i></span>
                  <div><strong><%= item.type %></strong><small><%= i18n.__('systemFinance.gatewayIdentity') %></small></div>
                </div>
                <span class="kt-ops-status <%= active ? 'kt-ops-status--success' : 'kt-ops-status--muted' %>">
                  <%= active ? i18n.__('systemFinance.activeGateway') : i18n.__('systemFinance.inactiveGateway') %>
                </span>
              </header>

              <% if (!active) { %>
                <form action="/dashboard/sms/changeSms" method="post" data-ops-form>
                  <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                  <input type="hidden" name="smsId" value="<%= item.smsId %>">
                  <button class="kt-ops-btn kt-ops-btn--success" type="submit"
                    data-ops-loading-label="<%= i18n.__('systemFinance.saving') %>">
                    <span class="kt-ops-btn__spinner" data-ops-button-spinner hidden></span>
                    <span data-ops-button-label><i class="ti ti-power" aria-hidden="true"></i> <%= i18n.__('systemFinance.activate') %></span>
                  </button>
                </form>
              <% } %>

              <form action="/dashboard/settings/editSmsSmtp" method="post" data-ops-form novalidate>
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                <input type="hidden" name="id" value="<%= item.smsId %>">
                <div class="kt-ops-form-grid">
                  <div class="kt-ops-field" data-ops-field>
                    <label for="sms-sender-<%= index %>"><%= i18n.__('sms.senderNameSms') %></label>
                    <input class="kt-ops-control" id="sms-sender-<%= index %>" name="sendName" type="text"
                      value="<%= item.sendName || '' %>" minlength="2" maxlength="100" required
                      dir="ltr" lang="en" autocomplete="off" placeholder="Sender name">
                    <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
                  </div>
                  <div class="kt-ops-field" data-ops-field>
                    <label for="sms-user-<%= index %>"><%= i18n.__('sms.userNameSms') %></label>
                    <input class="kt-ops-control" id="sms-user-<%= index %>" name="userName" type="text"
                      value="<%= item.userName || '' %>" minlength="4" maxlength="150" required
                      dir="ltr" lang="en" autocomplete="off" placeholder="Gateway username">
                    <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
                  </div>
                  <div class="kt-ops-field" data-ops-field>
                    <label for="sms-password-<%= index %>"><%= i18n.__('sms.passwordSms') %></label>
                    <input class="kt-ops-control" id="sms-password-<%= index %>" name="password" type="password"
                      minlength="6" maxlength="250" dir="ltr" lang="en" autocomplete="new-password"
                      placeholder="<%= i18n.__('systemFinance.passwordUnchanged') %>">
                    <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
                  </div>
                  <div class="kt-ops-field" data-ops-field>
                    <label for="sms-key-<%= index %>"><%= i18n.__('sms.apiKey') %></label>
                    <input class="kt-ops-control" id="sms-key-<%= index %>" name="apiKey" type="password"
                      minlength="10" maxlength="500" dir="ltr" lang="en" autocomplete="new-password"
                      placeholder="<%= i18n.__('systemFinance.apiKeyUnchanged') %>">
                    <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
                  </div>
                  <div class="kt-ops-field kt-ops-field--wide" data-ops-field>
                    <label for="sms-secret-<%= index %>">API Secret</label>
                    <input class="kt-ops-control" id="sms-secret-<%= index %>" name="apiSecret" type="password"
                      minlength="6" maxlength="500" dir="ltr" lang="en" autocomplete="new-password"
                      placeholder="New API secret — leave blank to keep unchanged">
                    <p class="kt-ops-field__error" data-ops-field-error aria-live="polite"></p>
                  </div>
                </div>
                <div class="kt-finance-secret-state" aria-label="<%= i18n.__('systemFinance.credentials') %>">
                  <span><i class="ti <%= item.hasPassword ? 'ti-lock-check' : 'ti-lock-off' %>"></i><%= item.hasPassword ? i18n.__('systemFinance.secretConfigured') : i18n.__('systemFinance.secretNotConfigured') %></span>
                  <span><i class="ti <%= item.hasApiKey ? 'ti-key' : 'ti-key-off' %>"></i>API Key</span>
                  <span><i class="ti <%= item.hasApiSecret ? 'ti-shield-check' : 'ti-shield-off' %>"></i>API Secret</span>
                </div>
                <footer class="kt-ops-form__footer">
                  <button class="kt-ops-btn kt-ops-btn--primary" type="submit"
                    data-ops-loading-label="<%= i18n.__('systemFinance.saving') %>">
                    <span class="kt-ops-btn__spinner" data-ops-button-spinner hidden></span>
                    <span data-ops-button-label><i class="ti ti-device-floppy" aria-hidden="true"></i> <%= i18n.__('systemFinance.save') %></span>
                  </button>
                </footer>
              </form>
            </article>
          <% }) %>
        </div>
      <% } %>
    </section>
  </div>
</main>
<%- include('../systemFinance/scripts.ejs') %>
