popup-maker-settings.html.twig in Popup Maker - All popup types 8

<div id="sgpm-admin">
  <div class="sgpm-tabs">
    <div class="sgpm-tabs-toolbar">
      {% if edit == true %}
        <div class="sgpm-tab">{{ 'Edit popup'|t }}</div>
      {% endif %}
      {% if settings.user is not empty %}
        <div class="sgpm-tab">{{ 'Popups'|t }}</div>
      {% endif %}
      <div class="sgpm-tab">{{ 'Api Credentials'|t }}</div>
      <div class="sgpm-tab">{{ 'Support'|t }}</div>
    </div>
    <div class="sgpm-tabs-content">
      {% if edit == true %}
        <section id="sgpm-edit-popup-panel" class="sgpm-panel">
          <h2 class="sgpm-panel-title">Editing <span class="sgpm-red">{{ settings.popups[editingPopupId].title }}</span></h2>

            <form action="{{ url('popup_maker.settings.update_popup') }}" method="post" >
              <input type="hidden" name="id" value="{{ editingPopupId }}" />
              <div class="sgpm-display-rules">
                {% if settings.popupSettings[editingPopupId].displayOptions is empty %}
                  {% include '@popup_maker/display-rule.html.twig' with {'rule': [], index: 0, 'last': true, 'displayRules': displayRules} %}
                {% else %}
                  {% for displayOption in settings.popupSettings[editingPopupId].displayOptions %}
                    {% include '@popup_maker/display-rule.html.twig' with {'rule': displayOption, index: loop.index0, 'last': loop.last, 'displayRules': displayRules} %}
                  {% endfor %}
                {% endif %}
              </div>
              <p>
                <input type="submit" name="sgpm-edit-popup-submit" value="Submit" class="sgpm-btn" />
              </p>
            </form>
            <input type="hidden" id="display-rule-row" value="{% filter escape %}{% include '@popup_maker/display-rule.html.twig' with {'rule': [], index: '{index}', 'last': true, 'displayRules': displayRules} %} {% endfilter %}" />

        </section>
      {% endif %}
      {% if settings.user is not empty %}
        <section id="sgpm-popups-panel" class="sgpm-panel">
          {% if settings.user.isActive is defined and settings.user.isActive %}

            {% if settings.popups|length > 3 %}
              <div class="sgpm-refresh-wrap-top">
                <a class="sgpm-btn sgpm-btn--green-meadow" href="{{ url('popup_maker.settings.refresh_popups') }}">
                  <svg fill="#ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
                    <path d="M0 0h24v24H0z" fill="none"/>
                  </svg>
                  Refresh popups list
                </a>
              </div>
            {% endif %}

            {% if settings.popups is defined and settings.popups is not empty %}
              <div class="sgpm-popup-list">
                <table>
                  {% for popupId,popup in settings.popups %}
                    <tr>
                      <td>
                        <span class="sgpm-popup-title sgpm-red">{{ popup.title }}</span>
                        <div class="sgpm-popup-list-actions">
                          <a class="sgpm-fab-btn" href="{{ url('popup_maker.settings.edit_popup_settings', {'id': popupId}) }}" title="Edit">
                            <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                              <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
                              <path d="M0 0h24v24H0z" fill="none"/>
                            </svg>
                          </a>
                          <form action="{{ url('popup_maker.settings.update_status') }}" method="post" >
                            <input type="hidden" name="_csrf_token" value="{{ token }}" />
                            <input type="hidden" name="id" value="{{ popupId }}" />

                            {% if settings.popupSettings[popupId].enabled == 1 %}
                              <button name="sgpm-disable-popup" value="disable" class="sgpm-btn sgpm-btn--red" >Disable</button>
                            {% else %}
                              <button name="sgpm-enable-popup" value="enable" class="sgpm-btn sgpm-btn--green" >Enable</button>
                            {% endif %}

                          </form>
                        </div>
                      </td>
                      <td>
                        {% if settings.popupSettings[popupId].enabled == 1 %}
                          <span class="sgpm-popup-status sgpm-green">Enabled</span>
                        {% else %}
                          <span class="sgpm-popup-status sgpm-red">Disabled</span>
                        {% endif %}
                      </td>
                    </tr>
                  {% endfor %}
                </table>
              </div>
            {% else %}
              <h3 class="sgpm-info-about-not-popups">
                Dear <span class="sgpm-black">{{ settings.user.firstname }}</span> you have no popups created yet!
              </h3>
              <h4>
                Click <a href="https://popupmaker.com/dashboard" title="Click here to create a new popup" target="_blank">here</a>
                to create a new popup, after that, click on the <span class="sgpm-red">"Refresh popups list"</span> button.
              </h4>
            {% endif %}

            <div class="sgpm-refresh-wrap-bottom">
              <a class="sgpm-btn sgpm-btn--green-meadow" href="{{ url('popup_maker.settings.refresh_popups') }}">
                <svg fill="#ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
                  <path d="M0 0h24v24H0z" fill="none"/>
                </svg>
                Refresh popups list
              </a>
            </div>

          {% else %}
            <h3 class="sgpm-info-about-account-activate">
              Dear <span class="sgpm-black">{{ settings.user.firstname }}</span> you must activate your Popup Maker account before use your popups.
            </h3>
            <h4 class="sgpm-info-about-activation-url">
              We have sent you an activation email for your Popup Maker account. Please, check and activate.
            </h4>
          {% endif %}
        </section>
      {% endif %}
      <section id="sgpm-api-credentials-panel" class="sgpm-panel">
        <h3 class="sgpm-notice sgpm-red">{{ 'Please, connect to your Popup Maker account via API key to start using the plugin.'|t }}</h3>
        <p><i>{{ 'Don’t have an account?'|t }} <a href="https://popupmaker.com/signup?utm_source=drupal&amp;utm_medium=website" title="Click here to view Popup Maker" target="_blank">{{ 'Click here to create Popup Maker account'|t }}</a>&nbsp;{{ 'this will take only 30 seconds!'|t }}</i></p>
        <form id="sgpm-api-credentials-form" method="post" action="{{ url('popup_maker.settings.update_api_key') }}">
          <input type="hidden" name="_csrf_token" value="{{ token }}">
          <div class="sgpm-input-text">
            <label for="sgpm-field-key">{{ 'API Key:'|t }}</label>
            <input type="password" name="sgpm-api-key" id="sgpm-field-key" value="{{ settings.api_key }}" placeholder="{{ 'Enter your API Key here...'|t }}" />
            <p class="sgpm-field-description"><span class="sgpm-red">*</span><i>&nbsp;{{ 'You can find your API key in the'|t }} <a href="https://popupmaker.com/settings/index?utm_source=drupal&amp;utm_medium=website" title="Settings section" target="_blank">{{ 'Settings section'|t }}</a> {{ 'of your Popup Maker account'|t }}.</i></p>
          </div>
          <p>
            <input type="submit" value="Submit" name="sgpm-api-key-submit" class="sgpm-btn" />
          </p>
        </form>
      </section>
      <section id="sgpm-support-panel" class="sgpm-panel">
        <iframe width="100%" height="500" src="https://www.youtube.com/embed/jXv3Ugnkt-w?list=UUhtxsnAzUmv02GZhiL66Nwg" frameborder="0" gesture="media" allowfullscreen></iframe>
        <a href="https://popupmaker.com/help/kb/faq.php?id=32&title=How+to+Use+the+Popup+Maker+Plugin+in+WordPress%3F" class="sgpm-support-block-box" target="_blank">
          <svg height="60" viewBox="0 0 24 24" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs>
              <path d="M0 0h24v24H0V0z" id="a"/>
            </defs>
            <clipPath id="b">
              <use overflow="visible" xlink:href="#a"/>
            </clipPath>
            <path clip-path="url(#b)" d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/>
          </svg>
          <p class="sgpm-support-block-box-title">Knowledgebase</p>
        </a>
        <a href="https://popupmaker.com/help/open.php" class="sgpm-support-block-box" target="_blank">
          <svg height="60" viewBox="0 0 24 24" width="60" xmlns="http://www.w3.org/2000/svg">
            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
            <path d="M0 0h24v24H0z" fill="none"/>
          </svg>
          <p class="sgpm-support-block-box-title">Open a New Ticket</p>
        </a>
      </section>
    </div>
  </div>
</div>