{% extends "_base.html" %}

{% block page_title %}{{ feature.name }} - {% endblock %}

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

{% block subheader %}
<div id="subheader">
  <div>
    <h2>Next steps for the Blink launch process</h2>
  </div>
</div>
{% endblock %}

{% block content %}

{% if feature.unlisted %}
<div class="alertbox">
  Important: This feature is currently unlisted.  Please only share
  feature details with people who are collaborating with you on
  the feature.
</div>
{% endif %}

{% if launch %}
<section>
<h3>Click through this link to file a launch-tracking bug</h3>
  {% include "blink/launch_bug.html" %}
</section>
{% endif %}

{% if intent %}
<section>
<h3>Reach out to a spec mentor</h3>
<p style="margin-left: 1em">
  Consider showing your draft intent email to your spec mentor or
  sending it to spec-mentors@chromium.org.  They can help make sure
  that your intent email is ready for review.</p>
</section>
{% endif %}

{% if intent %}
<section>
  <h3>Copy and send this text for your "Intent to ..." email</h3>
  <p>Email to</p>
  <div class="subject">
    blink-dev@chromium.org
  </div>

  <p>Subject</p>
  <div class="subject">
    {{subject_prefix}}:
    {{feature.name}}
  </div>

  {#
    Insted of vertical margins, <br> elements are used to create line breaks
    that can be copied and pasted into a text editor.
  #}

  <p>Body
    <span class="tooltip copy-text" style="float:right"
          title="Copy text to clipboard">
        <a href="#" data-tooltip>
          <sl-icon name="copy"
                    id="copy-email-body"></sl-icon>
        </a>
    </span>
  </p>

  <div class="email">
    {% include "blink/intent_to_implement.html" %}
  </div> <!-- end email body div -->
</section>
{% endif %}

{% if 'need_api_owners_lgtms' in sections_to_show %}
<section>
<h3>Obtain LGTMs from 3 API Owners</h3>
<span class="help">
  You will need three LGTMs from API owners.
According to the
<a href="http://www.chromium.org/blink#launch-process">Blink Launch process</a>
after that, you're free to ship your feature.
</span>
</section>
{% endif %}

{% endblock %}

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

  const copyEmailBodyEl = document.querySelector('#copy-email-body');
  const emailBodyEl = document.querySelector('.email');
  const toastEl = document.querySelector('chromedash-toast');
  if (copyEmailBodyEl && emailBodyEl) {
      copyEmailBodyEl.addEventListener('click', () => {
          window.getSelection().removeAllRanges();
          const range = document.createRange();
          range.selectNode(emailBodyEl);
          window.getSelection().addRange(range);
          document.execCommand('copy');
          toastEl.showMessage('Email body copied');
      });
  }
</script>
{% endblock %}