<div class="page-header">
  <div class="page-header-title">
    <h1><%- @T('Signal') %></h1>
  </div>

  <div class="page-header-meta">
    <a class="btn btn--success js-new"><%- @T('Add Signal bot') %></a>
  </div>
</div>

<div class="page-content">

<% if _.isEmpty(@channels): %>
  <div class="page-description">
    <p><%- @T('You have no configured %s right now.', 'Signal numbers') %></p>
  </div>
<% else: %>

<% for channel in @channels: %>
  <div class="action <% if channel.active isnt true: %>is-inactive<% end %>" data-id="<%= channel.id %>">
    <div class="action-block action-row">
      <h2><%- @Icon('status', 'supergood-color inline') %> <%= channel.options.phone_number %></h2>
    </div>
    <div class="action-flow action-flow--row">
      <div class="action-block">
        <h3><%- @T('Group') %></h3>
        <% if channel.options: %>
          <%= channel.options.groupName %>
        <% end %>
      </div>

      <div class="action-block">
        <h3><%- @T('Endpoint URL') %></h3>
        <%- @T('Click the edit button to view the endpoint details ') %>
      </div>
    </div>
    <div class="action-controls">
      <div class="btn btn--danger btn--secondary js-delete"><%- @T('Delete') %></div>
      <div class="btn btn--danger btn--secondary js-rotate-token"><%- @T('Reset Token') %></div>
      <% if channel.active is true: %>
        <div class="btn btn--secondary js-disable"><%- @T('Disable') %></div>
      <% else: %>
        <div class="btn btn--secondary js-enable"><%- @T('Enable') %></div>
      <% end %>
      <div class="btn js-edit"><%- @T('Edit') %></div>
    </div>
  </div>
<% end %>
</div>
