<style>
  main {
    text-align: center;
  }

  img {
    display: block;
    width: 10%;
    margin: 0 auto;
    padding-bottom: 20px;
  }

  .btn {
    min-width: 30%;
  }

  ul {
    text-align: left;
  }

  form {
    display: inline;
  }

  #oauth-permissions {
    display: block;
    margin: 0 auto;
    font-size: 1.5em;
    width: 70%;
  }

  .actions {
    border: none;
  }

  .footer {
    margin-top: 30px;
    padding: 20px;
    padding-bottom: 10px;
    border-top: 1px solid #eee;
    text-align: left;
  }
</style>

<header class="page-header" role="banner">
  <img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/9bsnlmppunw39rnnshk6.png") %>"/>
</header>

<main role="main">
  <p class="h3">
    <%= raw t(".prompt", client_name: content_tag(:strong, class: "text-info") { @pre_auth.client.name }) %>
  </p>

  <% if @pre_auth.scopes.count > 0 %>
    <div id="oauth-permissions">
      <p><%= t(".able_to") %>:</p>
      <ul>
        <% @pre_auth.scopes.each do |scope| %>
          <li><%= t scope, scope: %i[doorkeeper scopes] %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="actions">
    <%= form_tag oauth_authorization_path, method: :post do %>
      <%= hidden_field_tag :client_id, @pre_auth.client.uid %>
      <%= hidden_field_tag :redirect_uri, @pre_auth.redirect_uri %>
      <%= hidden_field_tag :state, @pre_auth.state %>
      <%= hidden_field_tag :response_type, @pre_auth.response_type %>
      <%= hidden_field_tag :scope, @pre_auth.scope %>
      <%= hidden_field_tag :code_challenge, @pre_auth.code_challenge %>
      <%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method %>
      <%= submit_tag t("doorkeeper.authorizations.buttons.authorize"), class: "btn btn-success" %>
    <% end %>
    <%= form_tag oauth_authorization_path, method: :delete do %>
      <%= hidden_field_tag :client_id, @pre_auth.client.uid %>
      <%= hidden_field_tag :redirect_uri, @pre_auth.redirect_uri %>
      <%= hidden_field_tag :state, @pre_auth.state %>
      <%= hidden_field_tag :response_type, @pre_auth.response_type %>
      <%= hidden_field_tag :scope, @pre_auth.scope %>
      <%= hidden_field_tag :code_challenge, @pre_auth.code_challenge %>
      <%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method %>
      <%= submit_tag t("doorkeeper.authorizations.buttons.deny"), class: "btn btn-danger" %>
    <% end %>
  </div>
  <div class="footer">
    <p>You can revoke access to any application at any time from the <a href="https://dev.to/settings/integrations">Integrations</a> tab of your Settings page. By authorizing an application you continue to operate under DEV's <a href="https://dev.to/terms">Terms of Service</a>.</p>
  </div>
</main>
