{%# This is EJS template. Parameters: openDelimiter: "{", closeDelimiter="}" %}
<div class="pp-dev-info-namespace pp-dev-info">
  <div class="pp-dev-info__wrap-btn">
    <svg class="pp-dev-info__wrap-btn-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
      <path
        d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"
      />
    </svg>
  </div>

  <div class="pp-dev-info__content">
    <div class="pp-dev-info__section">
      <span class="pp-dev-info__item">
        <a href="https://www.npmjs.com/package/{%= PACKAGE_NAME %}/v/{%= VERSION %}" target="_blank" class="pp-dev-info__link">
          <span class="pp-dev-info__label">Package:</span>
          <span class="pp-dev-info__value primary">{%= PACKAGE_NAME %}</span>
          <span class="pp-dev-info__value warning">{%= VERSION %}</span>
        </a>
      </span>
    </div>

    {% if (backendBaseURL) { %}
    <div class="pp-dev-info__section">
      <span class="pp-dev-info__item">
        <span class="pp-dev-info__label">Backend URL:</span>
        <a href="!!{%= backendBaseURL %}" target="_blank" class="pp-dev-info__link">!!{%= backendBaseURL %}</a>
      </span>
    </div>
    {% } %}

    <div class="pp-dev-info__section">
      <span class="pp-dev-info__item">
        <span class="pp-dev-info__label">Template mode:</span>
        {% if (templateLess || !backendBaseURL || Number.isNaN(+portalPageId)) { %}
        <span class="pp-dev-info__value danger">Disabled</span>
        {% } else { %}
        <span class="pp-dev-info__value success">Enabled</span>
        {% } %}
      </span>
    </div>

    {% if (backendBaseURL && !Number.isNaN(+portalPageId)) { %}
    <div class="pp-dev-info__section">
      <span class="pp-dev-info__item">
        <span class="pp-dev-info__label">Portal page ID:</span>
        <a href="!!{%= backendBaseURL %}/admin/page/edit/id/{%= portalPageId %}" target="_blank" class="pp-dev-info__link">{%= portalPageId %}</a>
      </span>
    </div>
    {% } %}
  </div>

  {% if (backendBaseURL && !Number.isNaN(+portalPageId)) { %}
  <button id="sync-template" class="sync-button" title="Sync template">
    <svg
      fill="currentColor"
      width="16px"
      height="16px"
      viewBox="0 0 24 24"
      transform="rotate(0)matrix(1, 0, 0, -1, 0, 0)"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M19.91,15.51H15.38a1,1,0,0,0,0,2h2.4A8,8,0,0,1,4,12a1,1,0,0,0-2,0,10,10,0,0,0,16.88,7.23V21a1,1,0,0,0,2,0V16.5A1,1,0,0,0,19.91,15.51ZM12,2A10,10,0,0,0,5.12,4.77V3a1,1,0,0,0-2,0V7.5a1,1,0,0,0,1,1h4.5a1,1,0,0,0,0-2H6.22A8,8,0,0,1,20,12a1,1,0,0,0,2,0A10,10,0,0,0,12,2Z"
      />
    </svg>
  </button>
  {% } %}
</div>