<h4>{{i18n 'Stream Key'}}</h4>
<p>
  {{i18n 'Some broadcasting applications require your stream key in order to connect and broadcast to your Twitch channel.'}}
</p>
<br>
<hr>

<button class="button" type="text" {{action 'openModal'}}>{{i18n 'Show Key'}}</button>

{{#if isShowingStreamKeyModal}}
  {{#ember-wormhole to='wormhole-overlays'}}
    {{!-- ember-wormhole@0.5.0 must have a stable root element in 2.10.0-beta's --}}
    <div>
      {{#modal-dialog action=(action 'closeModal')}}
        <div class="card">
          <div class="text-content">
            <div class="content-header">
              <h4>{{i18n 'Stream Key'}}</h4>
            </div>

            <div class="item">
              <p class="inline-warning">
                {{i18n 'Never share your stream key with anyone or show it on stream! Twitch Staff, Admins, or Global Moderators will never ask you for this information.'}}
              </p>
            </div>

            <div class="item">
              <p>
                {{i18n 'Please click "I Understand" if you understand the above and would like to view your stream key.'}}
              </p>
            </div>

            {{#if isShowingStreamKey}}
              {{#if streamKeyError}}
                <div class="item">
                  <p>
                    {{i18n 'Failed to retrieve stream key. Please try refreshing the page.'}}
                  </p>
                </div>
              {{else}}
                <div class="item">
                  <h5>{{i18n 'Stream Key'}}:</h5>
                  <div class="brick" data-test-selector="stream-key">
                    {{! template-lint-disable bare-strings }}
                    <span class="dash-widget-text dash-widget-text--sm dash-widget-text--light">{{streamKey}}</span>
                    {{! template-lint-enable bare-strings }}
                  </div>
                </div>

                <div class="buttons">
                  <button type="button" class="button" {{action 'resetStreamKey'}}>{{i18n 'Reset Key'}}</button>
                </div>
              {{/if}}
            {{else}}
              <div class="buttons">
                <button type="button" class="button" {{action 'showStreamKey'}}>{{i18n 'I Understand'}}</button>
              </div>
            {{/if}}
          </div>
        </div>
      {{/modal-dialog}}
    </div>
  {{/ember-wormhole}}
{{/if}}
