{% extends "views/manage-prototype/layout.njk" %}
{% from "govuk/components/button/macro.njk" import govukButton %}

{% block content %}
  <div class="govuk-grid-row govuk-prototype-kit-manage-prototype-plugin-processing">
    <div class="govuk-grid-column-two-thirds">

      <h1 class="govuk-heading-l">Plugins</h1>

      <div id="plugin-heading" {% if dependencyHeading %}hidden class="js-hidden"{% endif %} >
        <h2 class="govuk-heading-m">{{ pluginHeading }}</h2>
      </div>

      {% if dependencyHeading %}
      <div id="dependency-heading">
        <h2 class="govuk-heading-m">{{ dependencyHeading }}</h2>
      </div>
      {% endif %}

      <div id="panel-manual-instructions" class="govuk-prototype-kit-manage-prototype-plugin-instructions js-hidden">
        <p>
          In terminal, press <strong>ctrl + c</strong> to stop your prototype, then run:
        </p>
        <p>
          <code>{{ command }}</code>
        </p>
        <p>
          When you've {{ verb.status }} the plugin, restart your prototype in the terminal by typing:
        </p>
        <p>
          <code>npm run dev</code>
        </p>
      </div>

      <div class="js-visible" aria-live="polite">

        {% if chosenPlugin.dependencyPlugins|length or chosenPlugin.dependentPlugins|length %}
          <div id="plugin-action-confirmation">

          <ul class="govuk-list govuk-list--bullet">
            {% for plugin in chosenPlugin.dependencyPlugins %}
              <li>{{ plugin.name }}{% if plugin.scope %} from {{ plugin.scope }} {% endif %}</li>
            {% endfor %}
            {% for plugin in chosenPlugin.dependentPlugins %}
              <li>{{ plugin.name }}{% if plugin.scope %} from {{ plugin.scope }} {% endif %}</li>
            {% endfor %}
          </ul>

          <p class="govuk-body">
            To {{ verb.para }} {{ chosenPlugin.name }} you also need to {{ verb.dependencyPara }} {% if chosenPlugin.dependentPlugins | length > 1 %}these plugins{% else %}this plugin{% endif %}.
          </p>
          <div class="govuk-button-group">
            {{ govukButton({
              text: verb.title + ' these plugins',
              attributes: { id: "plugin-action-button" }
            }) }}

            <a class="govuk-link" href="{{ returnLink.href }}">Cancel {{ verb.para }}</a>
          </div>
        </div>
        {% elseif not isSameOrigin %}
          <div id="plugin-action-confirmation">
            <p class="govuk-body">
              Are you sure you want to {{ verb.para }} this plugin?
            </p>
            {{ govukButton({
              text: verb.title,
              attributes: { id: "plugin-action-button" }
            }) }}
          </div>
        {% endif %}

        <div hidden class="govuk-panel panel-processing" id="panel-processing">
          <div class="govuk-panel__title govuk-!-font-size-27">
            {{ verb.progressive|capitalize }} ...
          </div>
        </div>

        <div hidden class="govuk-panel govuk-panel--confirmation" id="panel-complete">
          <div class="govuk-panel__title govuk-!-font-size-27">
            {{ verb.title }} complete
          </div>
        </div>

        <div hidden class="govuk-panel panel-error" id="panel-error">
          <div class="govuk-panel__title govuk-!-font-size-27">
            There was a problem {{ verb.progressive }}
          </div>
          <div class="govuk-panel__body govuk-!-font-size-19">
            <a class="govuk-link govuk-link--no-visited-state" href="https://prototype-kit.service.gov.uk/support/">
              Please contact support
            </a>
          </div>
        </div>

        <div hidden class="" id="instructions-complete">
          <p class="govuk-body">
            If you are using Git you can commit this change.
          </p>
          <p class="govuk-body">
            <a href="{{ returnLink.href }}">
              {{ returnLink.text }}
            </a>
          </p>
        </div>

      </div>

    </div>
  </div>
{% endblock %}

{% block pageScripts %}
  <script>
    if (window.Promise) {
      // Dynamically load and execute the script
      const managePluginsScript = document.createElement('script')
      managePluginsScript.addEventListener('load', () => {
        window.GOVUKPrototypeKit.documentReady(window.GOVUKPrototypeKit.internal.managePlugins.init)
      })
      managePluginsScript.setAttribute('src', '/plugin-assets/govuk-prototype-kit/lib/assets/javascripts/manage-prototype/manage-plugins.js')
      document.body.appendChild(managePluginsScript)
    } else {
      // Display the page as if javascript was not enabled
      document.body.classList.remove('js-enabled')
    }
  </script>
{% endblock %}