{% extends "_base.html" %}

{% block page_title %}OT Requests Admin Page - {% endblock %}

{% block css %}
<link rel="stylesheet" href="/static/css/forms.css?v={{app_version}}">
<link rel="stylesheet" href="/static/css/ot_requests.css?v={{app_version}}">
{% endblock %}

{% block content %}
<div class="container">
  <div class="page-header">
    <h1>OT Requests</h1>
    <p>Review new requests, pending extensions, and trial statuses.</p>
  </div>

<!-- SECTION: Origin Trial Requests with Errors -->
  <div class="section-header">
    <h2>Requests With Errors</h2>
    <p>
      These origin trials had an error occur during the creation process.
      Investigate the issues using
      <a href="https://g3doc.corp.google.com/chrome/origin_trials/g3doc/trial_admin.md#troubleshooting-automated-origin-trial-creation-failures" target="_blank" rel="noopener noreferrer">
        the troubleshooting guide.
      </a>
    </p>
  </div>

  {% if failed_stages %}
    {% for stage in failed_stages %}
      <article class="ot-card">
        <header class="ot-card-header">
          <h3>{{ stage.ot_display_name }}</h3>
        </header>
        <div class="ot-card-body">
          <div class="data-section">
            <h4>Key Information</h4>
            <div class="data-grid">
              <div class="data-pair"><span class="label">Requester</span><span class="value">{{ stage.ot_requester_email or stage.ot_owner_email }}</span></div>
              <div class="data-pair"><span class="label">Owner</span><span class="value">{{ stage.ot_owner_email }}</span></div>
              <div class="data-pair"><span class="label">Contacts</span><span class="value">{{ stage.ot_emails | join(', ') }}</span></div>
              <div class="data-pair"><span class="label">Chromium Trial Name</span><span class="value">{{ stage.ot_chromium_trial_name or 'Not specified' }}</span></div>
              <div class="data-pair"><span class="label">Use Counter</span><span class="value">{{ stage.ot_webfeature_use_counter or 'Not specified' }}</span></div>
              <div class="data-pair"><span class="label">Feature ID</span><span class="value"><a href="https://chromestatus.com/feature/{{stage.feature_id}}" target="_blank" rel="noopener noreferrer">{{stage.feature_id}}</a></span></div>
            </div>
          </div>

          <div class="data-section">
            <h4>Timeline</h4>
            <div class="data-grid">
              <div class="data-pair"><span class="label">Start Milestone</span><span class="value">{{ stage.desktop_first }}</span></div>
              <div class="data-pair"><span class="label">End Milestone</span><span class="value">{{ stage.desktop_last }}</span></div>
            </div>
          </div>

          <div class="data-section">
            <h4>Details & Links</h4>
            <div class="data-grid data-grid-full">
              <div class="data-pair"><span class="label">Description</span><span class="value">{{ stage.ot_description }}</span></div>
              <div class="data-pair"><span class="label">Intent Thread</span><span class="value"><a href="{{ stage.intent_thread_url }}" target="_blank" rel="noopener noreferrer">{{ stage.intent_thread_url }}</a></span></div>
              <div class="data-pair"><span class="label">Documentation</span><span class="value"><a href="{{ stage.ot_documentation_url }}" target="_blank" rel="noopener noreferrer">{{ stage.ot_documentation_url }}</a></span></div>
              <div class="data-pair"><span class="label">Feedback URL</span><span class="value"><a href="{{ stage.ot_feedback_submission_url }}" target="_blank" rel="noopener noreferrer">{{ stage.ot_feedback_submission_url }}</a></span></div>
            </div>
          </div>

          <div class="data-section">
            <h4>Trial Attributes</h4>
            <div class="data-grid data-grid-trio">
                <div class="tag {% if stage.ot_has_third_party_support %}tag-yes{% else %}tag-no{% endif %}">Third-party Support</div>
                <div class="tag {% if stage.ot_is_critical_trial %}tag-yes{% else %}tag-no{% endif %}">Critical Trial</div>
                <div class="tag {% if stage.ot_is_deprecation_trial %}tag-yes{% else %}tag-no{% endif %}">Deprecation Trial</div>
            </div>
          </div>
        </div>
      </article>
    {% endfor %}
  {% else %}
    <p>No requests with validation errors found.</p>
  {% endif %}

  <!-- SECTION: Extensions Awaiting Initiation -->
  <div class="section-header">
    <h2>Extensions Awaiting Initiation</h2>
    <p>These extensions have been requested, but are not yet initiated.</p>
  </div>
  {% if extension_stages %}
    <div class="card-deck">
    {% for stage_info in extension_stages %}
      <article class="ot-card mini-card">
        <header class="ot-card-header">
          <h4>{{ stage_info.ot_stage.ot_display_name }}</h4>
        </header>
        <div class="ot-card-body">
          <div class="data-pair"><span class="label">Trial ID</span><span class="value">{{ stage_info.ot_stage.origin_trial_id }}</span></div>
          <div class="data-pair"><span class="label">Feature ID</span><span class="value"><a href="https://chromestatus.com/feature/{{stage_info.ot_stage.feature_id}}" target="_blank" rel="noopener noreferrer">{{stage_info.ot_stage.feature_id}}</a></span></div>
          <div class="data-pair"><span class="label">New End Milestone</span><span class="value">{{ stage_info.extension_stage.desktop_last }}</span></div>
          <div class="data-pair"><span class="label">Intent to Extend</span><span class="value"><a href="{{ stage_info.extension_stage.intent_thread_url }}" target="_blank" rel="noopener noreferrer">View Thread</a></span></div>
          <div class="data-pair"><span class="label">Comments</span><span class="value">{{ stage_info.extension_stage.ot_request_note or 'None' }}</span></div>
        </div>
      </article>
    {% endfor %}
    </div>
  {% else %}
    <p>No extensions awaiting initiation.</p>
  {% endif %}

  <!-- Combined Section for Pending Activation and Creation In Progress -->
  <div class="section-header">
      <h2>Trials Pending Creation or Activation</h2>
  </div>
  <div class="card-deck">
    <!-- subsection: Pending Activation -->
    {% for stage in activation_pending_stages %}
      <article class="ot-card mini-card">
        <header class="ot-card-header">
          <h4>{{ stage.ot_display_name }} <span class="status-pill status-pending">Pending Activation</span></h4>
        </header>
        <div class="ot-card-body">
          <div class="data-pair"><span class="label">Trial ID</span><span class="value">{{ stage.origin_trial_id }}</span></div>
          <div class="data-pair"><span class="label">Feature ID</span><span class="value"><a href="https://chromestatus.com/feature/{{stage.feature_id}}" target="_blank" rel="noopener noreferrer">{{stage.feature_id}}</a></span></div>
          <div class="data-pair"><span class="label">Activation Date</span><span class="value">{{ stage.ot_activation_date }}</span></div>
        </div>
      </article>
    {% endfor %}

    <!-- subsection: Creation in Progress -->
    {% for stage in creation_stages %}
      <article class="ot-card mini-card">
        <header class="ot-card-header">
          <h4>{{ stage.ot_display_name }} <span class="status-pill status-progress">Creation in Progress</span></h4>
        </header>
        <div class="ot-card-body">
          <div class="data-pair"><span class="label">Trial ID</span><span class="value">{{ stage.origin_trial_id }}</span></div>
          <div class="data-pair"><span class="label">Feature ID</span><span class="value"><a href="https://chromestatus.com/feature/{{stage.feature_id}}" target="_blank" rel="noopener noreferrer">{{stage.feature_id}}</a></span></div>
        </div>
      </article>
    {% endfor %}
    
    {% if not activation_pending_stages and not creation_stages %}
      <p>No trials pending activation or in creation.</p>
    {% endif %}
  </div>
</div>
{% endblock %}

{% block js %}
<script nonce="{{nonce}}">
document.addEventListener('DOMContentLoaded', () => {
  // Remove loading spinner at page load.
  document.body.classList.remove('loading');
});
</script>
{% endblock %}