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

  <div class="page-header-meta">
    <a class="btn js-configApp"><%- @T('Configure App') %></a>
    <a class="btn btn--success js-new"><%- @T('Add Account') %></a>
  </div>
</div>

<% if @external_credential && @external_credential.credentials && !@external_credential.credentials.webhook_id: %>
  <div class="alert alert--warning" role="alert"><%- @T('Your Twitter-App is not using the Twitter Account Activity API yet and is therefore limited to search terms only. Please refer to the documentation %l on how to update your account.', 'https://zammad-admin-documentation.readthedocs.io/en/latest/channels-twitter.html') %></div>
<% end %>

<div class="page-content">
<% 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.user.name %> <span class="text-muted">@<%= channel.options.user.screen_name %></span></h2>
    </div>

    <% if @external_credential && @external_credential.credentials && @external_credential.credentials.webhook_id && channel.options && channel.options.subscribed_to_webhook_id isnt @external_credential.credentials.webhook_id: %>
      <div class="alert alert--warning" role="alert"><%- @T('Your Twitter-Account is not using the Twitter Account Activity API yet and is therefore limited to search terms only. Please add/update the account again via "add account".') %></div>
    <% end %>

    <div class="action-flow action-flow--row">
      <div class="action-block">
        <h3><%- @T('Search Terms') %></h3>
        <% if channel.options.sync.search: %>
          <% for search in channel.options.sync.search: %>
            <%= search.term %><br>
          <% end %>
        <% end %>
      </div>
      <%- @Icon('arrow-right', 'action-flow-icon') %>
      <div class="action-block">
        <h3><%- @T('Group') %></h3>
        <% if channel.options.sync.search: %>
          <% for search in channel.options.sync.search: %>
            <%= search.groupName %><br>
          <% end %>
        <% end %>
      </div>
    </div>
    <div class="action-flow action-flow--row">
      <div class="action-block">
        <h3><%- @T('Mentions') %></h3>
        @<%= channel.options.user.screen_name %>
      </div>
      <%- @Icon('arrow-right', 'action-flow-icon') %>
      <div class="action-block">
        <h3><%- @T('Group') %></h3>
        <% if channel.options.sync.mentions: %>
          <%= channel.options.sync.mentions.groupName %>
        <% end %>
      </div>
    </div>
    <div class="action-flow action-flow--row">
      <div class="action-block">
        <h3><%- @T('Direct Messages') %></h3>
        @<%= channel.options.user.screen_name %>
      </div>
      <%- @Icon('arrow-right', 'action-flow-icon') %>
      <div class="action-block">
        <h3><%- @T('Group') %></h3>
        <% if channel.options.sync.direct_messages: %>
          <%= channel.options.sync.direct_messages.groupName %>
        <% end %>
      </div>
    </div>
    <div class="action-flow action-flow--row">
      <div class="action-block">
        <h3><%- @T('Retweets') %></h3>
        <% if channel.options.sync.track_retweets: %>
          <%- @T('Retweets are converted to Tickets') %>.
        <% else: %>
          <%- @T('Conversion of retweets to tickets is turned off') %>.
        <% end %>
      </div>
    </div>
    <div class="action-controls">
      <div class="btn btn--danger btn--secondary js-delete"><%- @T('Delete') %></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>