{% load trans blocktrans from i18n %}

{% comment rst %}
  Project automatic configuration view
  ====================================

  This is a big Knockout view that is separated out from the parent form just
  to make it easier to work with here. The parent form contains the basic HTML
  structure for the tabbed view and errors, where this template has more
  Knockout bindings used from JS.
{% endcomment %}

{% block project_add_configuration %}
  <script type="application/json" data-bind="jsonInit: config">
    {
      "urls": {
        "api_sync_remote_repositories": "{% url 'api_sync_remote_repositories' %}",
        "remoterepository_list": "{% url 'remoterepositories-list' %}"
      },
      "csrf_token": "{{ view_csrf_token }}",
      "allow_private_repos": {{ allow_private_repos|yesno:"true,false" }}
    }
  </script>
{% endblock project_add_configuration %}

{% block project_add_automatic_search %}
  <div class="ui small error message ko hidden"
       data-bind="css: {hidden: !error()}">
    {% trans "There was an error while syncing your remote repositories" %}
  </div>

  {# Search prompt and dropdown #}
  <label>{% trans "Repository name:" %}</label>
  <div class="ui fluid disabled loading scrolling search"
       data-bind="semanticui: {search: search_config(), popup: search_popup_config()}, css: {disabled: is_loading(), loading: is_loading()}">
    <div class="ui fluid icon large input">
      <input class="ui text" type="text" autofocus=true />
      <i class="fa-duotone fa-search icon"></i>
    </div>
    <div class="results"></div>

    {% block project_add_automatic_search_result %}
      {% comment %}
        This is the template used by Knockout to render the SUI search
        template. The output format is similar, but there are additional
        conditional blocks for display purposes. The `standard` search
        template only uses image, title, and description.

        This template will be loaded on search results and rendered to a
        string. The `response` object received by `onResponse` is used in
        the context binding, but the attributes are observable attributes.
      {% endcomment %}
      <script type="text/html" id="remote-repo-results">
{# fmt:off #}
<div data-bind="foreach: remote_repos" class="results">
  <a class="result">
    <div class="image">
      <img data-bind="attr: {src: avatar_url}">
    </div>
    <div class="content">
      <div class="title">
        <span class="text" data-bind="text: full_name"></span>
        {# Because of the search popup, a nested popup using data-content doesn't do anything here #}
        <i class="fa-duotone fa-eye-slash small icon" style="display: none" data-bind="visible: private" data-content="{% trans "Repository is private" %}"></i>
        <i class="fa-duotone fa-magic small icon" style="display: none" data-bind="visible: admin" data-content="{% trans "Repository can be automatically configured" %}"></i>
        <i class="fa-duotone fa-download small icon" style="display: none" data-bind="visible: has_project" data-content="{% trans "Repository is already configured" %}"></i>
      </div>
      <div class="description">
        <span data-bind="text: clone_url"></span>
      </div>
    </div>
  </a>
</div>
{# fmt:on #}
      </script>
    {% endblock project_add_automatic_search_result %}

  </div>

  {% comment %}
    Popup to trigger help modal

    This is triggered manually from the ``search_popup_config()`` observable
    and is set up using the ``semanticui.popup`` binding on the sibling
    element above.
  {% endcomment %}
  <div class="ui small wide primary popup">
    <div class="header">{% trans "Not finding a repository?" %}</div>
    <div class="description">
      <p>
        {% blocktrans trimmed %}
          This list might be out of date or reconfiguration might be necessary to update repositories.
        {% endblocktrans %}
      </p>
      <a class="ui small compact right floated inverted button"
         data-bind="click: show_modal">{% trans "Repair" %}</a>
    </div>
  </div>

  {% comment %}
    Modal for resyncing and repair repository/organization permissions

    This content is moved to a modal so that we have more UI to explain what is
    happening to the user, especially in the case that the user is connected
    via GHA and needs to reconfigure the application permissions.
  {% endcomment %}
  <div class="ui small modal"
       data-bind="semanticui: { modal: search_modal_config() }">
    <div class="header">
      {% blocktrans trimmed %}
        Repairing repository listing
      {% endblocktrans %}
    </div>
    <div class="content">
      <div class="ui segment">
        <div class="ui small divided items">

          {% if "githubapp" in socialaccount_providers %}
            <div class="item">
              <div class="content">
                <div class="description">
                  {% comment %}
                    This terminology comes from the documentation for GitHub App management.
                    Our GHA is "installed" for users or organizations and GitHub users
                    "grant access to repositories" (or on the GHA installation page
                    "install GHA _for repositories_").
                  {% endcomment %}
                  {# TODO detect if users have only installed on individual repositories so we can be more definite with this guidance #}
                  {% blocktrans trimmed %}
                    If our GitHub App was only granted access to select repositories,
                    repositories without access will not display in your repository list.
                    You will need to grant access to additional repositories each time you create a project.
                  {% endblocktrans %}
                </div>
                <div class="extra">
                  <a class="ui right floated button"
                     href="https://github.com/apps/{{ GITHUB_APP_NAME }}/installations/new/"
                     target="_blank">
                    <i class="fa-brands fa-github icon"></i>
                    {% trans "Update GitHub App installation" %}
                  </a>
                </div>
              </div>
            </div>
          {% endif %}

          {# This should show for all providers and manually connected repositories #}
          <div class="item">
            <div class="content">
              <div class="description">
                {% blocktrans trimmed %}
                  Your connected service account might be out of sync
                  and a manual refresh may be required to update your list of repositories.
                {% endblocktrans %}
              </div>
              <div class="extra">
                <a class="ui right floated button"
                   data-bind="click: sync_remote_repos, css: {disabled: is_syncing(), loading: is_syncing(), positive: is_synced()}">
                  <i class="fa-duotone fa-refresh icon"
                     data-bind="css: {'fa-refresh': !is_synced(), 'fa-check': is_synced()}"></i>
                  {% trans "Refresh your repositories" %}
                </a>
              </div>
            </div>
          </div>

          {% if "github" in socialaccount_providers %}
            {# This doesn't cover GitHub App providers, the fix for GHA is different #}
            <div class="item">
              <div class="content">
                <div class="description">
                  {% blocktrans trimmed %}
                    If your repository list does not include repositories from one of your GitHub organizations,
                    our GitHub application may not be approved by the organization yet.
                    In this case, you should try requesting approval of our GitHub application from the organization.
                  {% endblocktrans %}
                </div>
                <div class="extra">
                  <a class="ui right floated button"
                     href="https://docs.readthedocs.com/platform/stable/reference/git-integration.html#github-permission-troubleshooting">
                    <i class="fa-duotone fa-circle-check icon"></i>
                    {% trans "Learn how to request approval" %}
                  </a>
                </div>
              </div>
            </div>
          {% endif %}

        </div>
      </div>
    </div>
    <div class="actions">
      <div class="ui cancel button">{% trans "Go back" %}</div>
    </div>
  </div>
{% endblock project_add_automatic_search %}

{% block project_add_automatic_placeholder %}
  <div class="ui basic horizontally fitted segment"
       data-bind="visible: !is_selected()">
    <div class="ui top attached placeholder segment">
      <div class="ui icon header">
        {# Push user towards searching using input above #}
        <i class="fad fa-search icon"></i>
        {% trans "Select a repository" %}

        <div class="sub header">
          {# User has connected accounts, don't point to connecting GitHub/etc #}
          {% blocktrans trimmed %}
            Use the search above to find the repository you would like to
            use to build your new project. This project will be connected to
            the repository through your connected account.
          {% endblocktrans %}
        </div>
      </div>

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

{% block project_add_automatic_selected %}
  {% comment %}
    Card display for selected remote repository
    ===========================================

    This block only shows when there is a selected project from the
    search selection above. This block shows some information about using
    the repository, such as where the repository has already been
    connected and why the repository can/cannot be used.

  {% endcomment %}
  <div class="ui fluid card ko hidden"
       data-bind="css: {hidden: !is_selected()}, with: selected">
    <div class="content">
      <img class="ui right floated mini rounded image"
           data-bind="attr: { src: avatar_url }"
           alt="{% trans "Repository logo" %}" />
      <div class="header" data-bind="text: full_name"></div>
      <div class="meta" data-bind="text: clone_url"></div>
      <div class="description">

        <div class="ui basic segment">
          <div class="ui relaxed list">

            {# Do we support private repositories? #}
            <div class="item">
              <i class="fa-duotone fa-eye icon" data-bind="css: {'slash': private}"></i>
              <div class="content">
                <div class="header">
                  <span data-bind="visible: !private">{% trans "Repository is public" %}</span>

                  <span class="ui text"
                        data-bind="visible: private, css: { red: !$parent.is_repository_supported($data) }">
                    {% trans "Repository is private" %}
                  </span>
                </div>
                <div class="description">
                  <span data-bind="visible: $parent.is_repository_supported($data)">
                    {% blocktrans trimmed %}
                      This repository can be cloned.
                    {% endblocktrans %}
                  </span>

                  <p class="ui red text"
                     data-bind="visible: !$parent.is_repository_supported($data)">
                    {% blocktrans trimmed %}
                      Private repositories are not supported
                    {% endblocktrans %}
                  </p>
                  <p class="ui red text"
                     data-bind="visible: !$parent.is_repository_supported($data)">
                    <a class="ui red mini basic button"
                       href="https://docs.readthedocs.com/platform/stable/commercial/"
                       target="_blank">{% trans "Read more" %}</a>
                  </p>
                </div>
              </div>
            </div>

            {# Does user have admin privileges needed to import? #}
            <div class="item">
              <i class="fa-duotone fa-magic icon" data-bind="css: {red: !admin}"></i>
              <div class="content">
                <div class="header">
                  <span data-bind="visible: admin">{% trans "Repository can be automatically configured" %}</span>

                  <span class="ui red text" data-bind="visible: !admin">{% trans "Repository must be manually configured" %}</span>
                </div>
                <div class="description">
                  <span data-bind="visible: admin">
                    {% blocktrans trimmed %}
                      You have the necessary privileges needed to configure
                      this repository.
                    {% endblocktrans %}
                  </span>

                  <p class="ui red text" data-bind="visible: !admin">
                    {% blocktrans trimmed %}
                      You do not have the necessary permissions to
                      automatically configure this repository. Additional steps
                      will be required to configure this repository.
                    {% endblocktrans %}
                  </p>
                  <p class="ui red text" data-bind="visible: !admin">
                    <a class="ui red mini basic button"
                       href="https://docs.readthedocs.io/page/intro/import-guide.html#manually-import-your-docs"
                       target="_blank">{% trans "Learn how to manually configure this repository" %}</a>
                  </p>
                </div>
              </div>
            </div>

            {# Is the repository already imported? #}
            <div class="item" data-bind="if: has_project">
              <i class="fa-solid fa-plus icon"></i>
              <div class="content">
                <div class="header">{% trans "Repository is already configured" %}</div>
                <div class="description">
                  <p>
                    {% blocktrans trimmed %}
                      These following projects were already configured to use this repository:
                    {% endblocktrans %}
                  </p>
                  {# TODO this could be a proper project chip and popup card, but would need https://github.com/readthedocs/ext-theme/issues/196 #}
                  <div data-bind="foreach: projects">
                    <a class="ui basic image label"
                       data-bind="attr: {href: urls.home }"
                       target="_blank">
                      <img data-bind="if: $parent.avatar_url, attr: {src: $parent.avatar_url}"
                           alt="{% trans "Repository logo" %}" />
                      <span data-bind="text: name"></span>
                    </a>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

      </div>
    </div>
    <div class="extra content">
      <span class="right floated">
        <form action="{% url 'projects_import' %}" method="post">
          {% csrf_token %}
          <input type="hidden" name="name" data-bind="value: name" />
          <input type="hidden" name="repo" data-bind="value: clone_url" />
          <input type="hidden" name="repo_type" data-bind="value: vcs" />
          <input type="hidden" name="project_url" data-bind="value: html_url" />
          <input type="hidden" name="remote_repository" data-bind="value: pk" />
          <input type="hidden" name="default_branch" data-bind="value: default_branch" />

          <button class="ui primary button"
                  data-bind="css: {disabled: (!admin || !$parent.is_repository_supported($data))}">
            {% trans "Continue" %}
          </button>
        </form>
      </span>
    </div>
  </div>
{% endblock project_add_automatic_selected %}