{% extends "base.html" %}

{% load compress crispy_forms_tags i18n metrics permissions static translations %}

{% block nav_pills %}
  {% perm 'meta:vcs.status' object as user_can_see_repository_status %}
  {% perm 'project.permissions' object as user_can_manage_acl %}
  {% perm 'reports.view' object as user_can_view_reports %}
  {% perm 'translation.add' object as user_can_add_translation %}
  {% perm 'component.edit' object as user_can_edit_component %}

  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active"
         data-bs-target="#translations"
         data-bs-toggle="tab"
         href="#">{% translate "Languages" %}</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-target="#information" data-bs-toggle="tab" href="#">{% translate "Overview" %}</a>
    </li>
    {% if alerts %}
      <li class="nav-item">
        <a class="nav-link" data-bs-target="#alerts" data-bs-toggle="tab" href="#">{% translate "Alerts" %}</a>
      </li>
    {% endif %}
    <li class="nav-item">
      <a class="nav-link" data-bs-target="#search" data-bs-toggle="tab" href="#">{% translate "Search" %}</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">{% translate "Insights" %}</a>
      <ul class="dropdown-menu shadow">
        <li>
          <a class="dropdown-item" data-bs-target="#history" data-bs-toggle="tab" href="#">{% translate "History" %}</a>
        </li>
        <li>
          <a class="dropdown-item" href="{% url 'checks' path=object.get_url_path %}">{% translate "Failing checks" %}</a>
        </li>
        <li>
          <a class="dropdown-item"
             href="{% url 'api:component-statistics' project__slug=object.project.slug slug=object.api_slug %}?format=csv">{% translate "Download language statistics (CSV)" %}</a>
        </li>
        <li>
          <a class="dropdown-item"
             href="{% url 'api:component-statistics' project__slug=object.project.slug slug=object.api_slug %}?format=json-flat">{% translate "Download language statistics (JSON)" %}</a>
        </li>
        {% if user.is_authenticated %}
          <li>
            <a class="dropdown-item" data-bs-target="#reports" data-bs-toggle="tab" href="#">{% translate "Translation reports" %}</a>
          </li>
        {% endif %}
        <li>
          <a class="dropdown-item"
             href="{% url 'data_project' project=object.project.slug %}">{% translate "Data exports" %}</a>
        </li>
        <li>
          <a class="dropdown-item" href="{% url 'guide' path=object.get_url_path %}">{% translate "Community localization checklist" %}</a>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">{% translate "Files" %}</a>
      <ul class="dropdown-menu shadow">
        <li>
          <a class="dropdown-item"
             href="{% url 'download' path=object.get_url_path %}?format=zip"
             title="{% translate "Download for offline translation." %}">{% blocktranslate %}Download translation files as ZIP file{% endblocktranslate %}</a>
        </li>
        <li>
          <a class="dropdown-item"
             href="{% url 'download' path=object.get_url_path %}?format=zip:csv"
             title="{% translate "Download for offline translation." %}">{% blocktranslate %}Download translations as CSV in a ZIP file{% endblocktranslate %}</a>
        </li>
        <li>
          <a class="dropdown-item"
             href="{% url 'download' path=object.get_url_path %}?format=zip:xliff11"
             title="{% translate "Download for offline translation." %}">{% blocktranslate %}Download translations as XLIFF 1.1 in a ZIP file{% endblocktranslate %}</a>
        </li>
        <li>
          <a class="dropdown-item"
             href="{% url 'download' path=object.get_url_path %}?format=zip:xlsx"
             title="{% translate "Download for offline translation." %}">{% blocktranslate %}Download translations as XLSX in a ZIP file{% endblocktranslate %}</a>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">{% translate "Operations" %}</a>
      <ul class="dropdown-menu shadow">
        {% if replace_form %}
          <li>
            <a class="dropdown-item" data-bs-target="#replace" data-bs-toggle="tab" href="#">{% translate "Search and replace" %}</a>
          </li>
        {% endif %}
        {% if bulk_state_form %}
          <li>
            <a class="dropdown-item" data-bs-target="#bulk-edit" data-bs-toggle="tab" href="#">{% translate "Bulk edit" %}</a>
          </li>
        {% endif %}
        {% if autoform %}
          <li>
            <a class="dropdown-item" data-bs-target="#auto" data-bs-toggle="tab" href="#">{% translate "Batch automatic translation" %}</a>
          </li>
        {% endif %}
        <li>
          <a class="dropdown-item" href="{% url 'matrix' path=object.get_url_path %}">{% translate "Matrix view" %}</a>
        </li>
        {% if user_can_add_translation %}
          <li>
            <a class="dropdown-item" href="{% url "new-language" path=object.get_url_path %}">{% translate "Start new translation" %}</a>
          </li>
        {% endif %}
        <hr class="dropdown-divider">
        {% if user_can_see_repository_status %}
          <li>
            <a class="dropdown-item"
               data-bs-target="#repository"
               data-bs-toggle="tab"
               data-href="{% url 'git_status' path=object.get_url_path %}"
               href="#">{% translate "Repository maintenance" %}</a>
          </li>
          <hr class="dropdown-divider">
        {% endif %}
        <li>
          <a class="dropdown-item" href="{% url 'screenshots' path=object.get_url_path %}">{% translate "Screenshots" %}</a>
        </li>
        <li>
          <a class="dropdown-item" href="{% url 'memory' project=object.project.slug %}">{% translate "Translation memory" %}</a>
        </li>
        {% if announcement_form %}
          <li>
            <a class="dropdown-item"
               data-bs-target="#announcement"
               data-bs-toggle="tab"
               href="#">{% translate "Post announcement" %}</a>
          </li>
        {% endif %}
        {% if user_can_manage_acl %}
          <li>
            <a class="dropdown-item"
               href="{% url 'manage-access' project=object.project.slug %}">{% translate "Users" %}</a>
          </li>
        {% endif %}
        {% if user_can_edit_component %}
          <li>
            <a class="dropdown-item"
               href="{% url 'create-component' %}?component={{ object.id }}#existing">{% translate "Duplicate this component" %}</a>
          </li>
          <li>
            <a class="dropdown-item" href="{% url 'addons' path=object.get_url_path %}">{% translate "Add-ons" %}</a>
          </li>
        {% endif %}
        {% if delete_form or rename_form or user_can_edit_component or component_link_add_form %}
          <hr class="dropdown-divider">
          {% if user_can_edit_component %}
            <li>
              <a class="dropdown-item" href="{% url 'settings' path=object.get_url_path %}">{% translate "Settings" %}</a>
            </li>
          {% endif %}
          {% if component_link_add_form %}
            <li>
              <a class="dropdown-item" data-bs-target="#sharing" data-bs-toggle="tab" href="#">{% translate "Share in projects" %}</a>
            </li>
          {% endif %}
          {% if delete_form or rename_form %}
            <li>
              <a class="dropdown-item" data-bs-target="#organize" data-bs-toggle="tab" href="#">{% translate "Organize or remove" %}</a>
            </li>
          {% endif %}
        {% endif %}
      </ul>
    </li>
    {% include "snippets/share-menu.html" with object=object %}
    {% include "snippets/watch-dropdown.html" with project=object.project component=object %}
  </ul>
{% endblock nav_pills %}

{% block breadcrumbs %}
  {% path_object_breadcrumbs path_object %}

  <a class="ms-auto" href="{{ object.get_widgets_url }}">
    <img src="{% url 'widget-image' path=object.get_url_path widget='svg' color='badge' extension='svg' %}?native=1" />
  </a>
{% endblock breadcrumbs %}

{% block content %}

  {% announcements component=object %}

  {% include "snippets/component/state.html" %}

  {% perm 'meta:vcs.status' object as user_can_see_repository_status %}
  {% perm 'project.permissions' object as user_can_manage_acl %}
  {% perm 'reports.view' object as user_can_view_reports %}
  {% perm 'translation.add' object as user_can_add_translation %}
  {% perm 'component.edit' object as user_can_edit_component %}

  <div class="tab-content">
    <div class="tab-pane active" id="translations">

      {% include "snippets/list-objects.html" with objects=translations name_source="language" label=_("Language") is_glossary=object.is_glossary add_link="translation" %}

    </div>

    <div class="tab-pane" id="alerts">
      {% if user.is_authenticated %}
        {% for alert in alerts %}
          <div class="card">
            <div class="card-header">
              {% if alert.obj.doc_page %}
                {% documentation_icon alert.obj.doc_page alert.obj.doc_anchor right=True %}
              {% endif %}
              {{ alert }}
              {% if alert.dismissed %}
                <span class="badge  text-bg-secondary">{% translate "dismissed" %}</span>
              {% endif %}
            </div>
            <div class="card-body">{% render_alert alert %}</div>
            <form action="{% url "dismiss-alert" path=object.get_url_path %}" method="post">
              <div class="card-footer">
                {% comment %}Translators: Component alert footer, first and last contain localized human readable time span, for example 5 days ago{% endcomment %}
                {% blocktranslate with first=alert.timestamp|naturaltime last=alert.updated|naturaltime %}Appeared {{ first }}, last seen {{ last }}{% endblocktranslate %}
                {% if user_can_edit_component and alert.obj.dismissible %}
                  {% csrf_token %}
                  <input type="hidden" value="{{ alert.name }}" name="dismiss" />
                  <input type="submit"
                         value="{% translate "Dismiss" %}"
                         class="float-end btn btn-danger" />
                  <div class="clearfix"></div>
                {% endif %}
              </div>
            </form>
          </div>
        {% endfor %}
      {% else %}
        {% translate "Please sign in to see the alerts." as msg %}
        {% show_message "error" msg %}
      {% endif %}
    </div>

    <div class="tab-pane" id="information">
      {% show_info project=object.project component=object stats=object.stats metrics=object|metrics show_source=True %}
    </div>


    <div class="tab-pane" id="search">

      <form action="{% url 'search' path=object.get_url_path %}"
            method="get"
            data-persist="search-component">
        {% include "snippets/search-form.html" %}
      </form>

    </div>

    {% if replace_form %}
      <div class="tab-pane" id="replace">
        <form action="{% url 'replace' path=object.get_url_path %}"
              method="post"
              enctype="multipart/form-data">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">
                {% documentation_icon 'user/translating' 'search-replace' right=True %}
                {% translate "Search and replace" %}
              </h4>
            </div>
            <div class="card-body">{% crispy replace_form %}</div>
            <div class="card-footer">
              <input type="submit" value="{% translate "Replace" %}" class="btn btn-primary" />
            </div>
          </div>
        </form>
      </div>
    {% endif %}

    {% if bulk_state_form %}
      <div class="tab-pane" id="bulk-edit">
        <form action="{% url 'bulk-edit' path=object.get_url_path %}"
              method="post"
              enctype="multipart/form-data">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">
                {% documentation_icon 'user/translating' 'bulk-edit' right=True %}
                {% translate "Bulk edit" %}
              </h4>
            </div>
            <div class="card-body">{% crispy bulk_state_form %}</div>
            <div class="card-footer">
              <input type="submit" value="{% translate "Apply" %}" class="btn btn-primary" />
            </div>
          </div>
        </form>
      </div>
    {% endif %}

    <div class="tab-pane" id="history">
      {% format_last_changes_content last_changes=last_changes user=user %}
      <a class="btn btn-primary" href="{% url 'changes' path=object.get_url_path %}">{% translate "Browse all component changes" %}</a>
    </div>

    {% if announcement_form %}
      <div class="tab-pane" id="announcement">
        <form action="{% url 'announcement' path=object.get_url_path %}" method="post">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">
                {% documentation_icon 'admin/announcements' right=True %}
                {% translate "Post announcement" %}
              </h4>
            </div>
            <div class="card-body">
              {% csrf_token %}
              {{ announcement_form|crispy }}
              <p class="help-block">
                {% translate "The message is shown for all translations within the component, until its given expiry, or permanently until it is deleted." %}
              </p>
            </div>
            <div class="card-footer">
              <input type="submit" value="{% translate "Add" %}" class="btn btn-primary" />
            </div>
          </div>
        </form>

      </div>
    {% endif %}

    {% if autoform %}
      <div class="tab-pane" id="auto">{% include "snippets/autoform.html" with object=object autoform=autoform %}</div>
    {% endif %}

    {% if component_link_add_form %}
      <div class="tab-pane" id="sharing">
        <form method="post" action="{% url 'component-link-add' path=object.get_url_path %}">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">{% translate "Share in projects" %}</h4>
            </div>
            <div class="card-body">
              <p class="text-body-secondary">
                {% translate "Share this component in other projects, optionally placing it in a category." %}
              </p>
              {% csrf_token %}
              {% crispy component_link_add_form %}
            </div>
            <div class="card-footer">
              <input type="submit" class="btn btn-primary" value="{% translate "Add" %}">
            </div>
          </div>
        </form>

        {% if component_links_formset %}
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">{% translate "Current links" %}</h4>
            </div>
            <div class="card-body">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>{% translate "Project" %}</th>
                    <th>{% translate "Category" %}</th>
                    <th>{% translate "Actions" %}</th>
                  </tr>
                </thead>
                <tbody>
                  {% for link_form in component_links_formset %}
                    <tr>
                      <td class="align-middle">{{ link_form.project_name }}</td>
                      <td>
                        <form id="link-form-{{ link_form.link_id.value }}"
                              method="post"
                              action="{% url 'component-link-categories' path=object.get_url_path %}">
                          {% csrf_token %}
                          {{ link_form.link_id }}
                          {{ link_form.category }}
                        </form>
                      </td>
                      <td class="align-middle">
                        <input type="submit"
                               form="link-form-{{ link_form.link_id.value }}"
                               class="btn btn-primary btn-sm"
                               value="{% translate "Save" %}">
                        <form class="d-inline"
                              method="post"
                              action="{% url 'component-link-delete' path=object.get_url_path %}">
                          {% csrf_token %}
                          <input type="hidden" name="link_id" value="{{ link_form.link_id.value }}">
                          <input type="submit" class="btn btn-danger btn-sm" value="{% translate "Delete" %}">
                        </form>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        {% endif %}
      </div>
    {% endif %}

    {% if rename_form or delete_form %}
      <div class="tab-pane" id="organize">

        {% if rename_form %}
          <form method="post" action="{% url 'rename' path=object.get_url_path %}">
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">{% translate "Organize component" %}</h4>
              </div>
              <div class="card-body">
                <div class="form-group">
                  <div class="alert alert-warning" role="alert">
                    {% translate "Moving or renaming the component will also change its URLs." %}
                    {% translate "Users will need to update their bookmarks, references in cloned repositories, or API calls!" %}
                  </div>
                </div>
                {% crispy rename_form %}
              </div>
              <div class="card-footer">
                <input type="submit" class="btn btn-warning" value="{% translate "Organize" %}">
              </div>
            </div>
          </form>
        {% endif %}

        {% if delete_form %}
          {% include "trans/delete-form.html" %}
        {% endif %}


      </div>
    {% endif %}


    {% if user_can_see_repository_status %}
      <div class="tab-pane" id="repository">
        <p>{% translate "Loading…" %}</p>
      </div>
    {% endif %}

    {% if user.is_authenticated %}
      <div class="tab-pane" id="reports">
        {% if not user_can_view_reports %}
          {% translate "You don't have permission to view reports for all users, only your contributions will be listed." as msg %}
          {% show_message "warning" msg %}
        {% endif %}
        <div class="row">
          <div class="col-lg-6">
            <form action="{% url 'credits' path=object.get_url_path %}"
                  method="post"
                  enctype="multipart/form-data">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">
                    {% documentation_icon 'devel/reporting' 'credits' right=True %}
                    {% translate "Credits" %}
                  </h4>
                </div>
                <div class="card-body">
                  <p>
                    {% translate "Lists all translators contributing to this component in a given time period. Useful for inclusion in documentation or the app itself, to thank translators and generate feedback to them." %}
                  </p>
                  {% crispy reports_form %}
                </div>
                <div class="card-footer">
                  <input type="submit" value="{% translate "Generate" %}" class="btn btn-primary" />
                </div>
              </div>
            </form>
          </div>
          <div class="col-lg-6">
            <form action="{% url 'counts' path=object.get_url_path %}"
                  method="post"
                  enctype="multipart/form-data">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">
                    {% documentation_icon 'devel/reporting' 'stats' right=True %}
                    {% translate "Contributor stats" %}
                  </h4>
                </div>
                <div class="card-body">
                  <p>{% translate "Reports the number of strings and words translated by each translator." %}</p>
                  {% crispy reports_form %}
                </div>
                <div class="card-footer">
                  <input type="submit" value="{% translate "Generate" %}" class="btn btn-primary" />
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    {% endif %}

  </div>


{% endblock content %}