{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div style="width:100%">
    <h2 class="ct-docs-page-h1-title" id="content">
      External API
    </h2>
        <a href="{{ url_for('external_api_logs') }}" class="ms-2" style="float:right">
        Logs
      </a>
        <a href="#" id="auth_url_flow" class="ms-2" style="float:right">
        Info
      </a>
  </div>

  {% if message %}
  <p style="color:red;">{{ message }}</p>
  {% endif %}
  <form method="post" action="{{ url_for('external_api_config') }}" style="margin-bottom:20px;">
    <div class="form-check form-switch" style="margin-bottom:10px;">
      <input class="form-check-input" type="checkbox" role="switch" id="auth_enabled" name="auth_enabled" {% if auth_enabled %}checked{% endif %}>
      <label class="form-check-label" for="auth_enabled">Enable external authorizeTransaction</label>
    </div>
    <div style="margin-bottom:10px;">
      <label for="auth_url">Service URL:</label>
      <input type="text" id="auth_url" name="auth_url" value="{{ auth_url }}" style="width:100%">
      <br>

    </div>
    <div style="margin-bottom:10px;">
      <label for="auth_token">Bearer Token:</label>
      <input type="text" id="auth_token" name="auth_token" value="{{ auth_token }}" style="width:400px;">
    </div>
    <div style="margin-bottom:10px;">
      <label for="auth_api_key">X-API-KEY:</label>
      <input type="text" id="auth_api_key" name="auth_api_key" value="{{ auth_api_key }}" style="width:400px;">
    </div>


    <button class="btn btn-primary btn-sm pipelet-btn" type="submit">Save</button>
  </form>
</main>

<div class="modal fade" id="dataflowModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-0">
        <iframe id="dataflowFrame" src="" style="width:100%;height:80vh;border:0;"></iframe>
      </div>
    </div>
  </div>
</div>

<script>

document.getElementById('auth_url_flow').addEventListener('click', function (e) {
  e.preventDefault();
  document.getElementById('dataflowFrame').src = '/static/widgets/datenfluss.html';
  var modal = new bootstrap.Modal(document.getElementById('dataflowModal'));
  modal.show();
});
</script>
{% endblock %}