{% extends "base.html" %}
{% load i18n %}
{% load permissions %}
{% load translations %}
{% load crispy_forms_tags %}

{% block breadcrumbs %}
<li><a href="{{ object.project.get_absolute_url }}">{{ object.project }}</a></li>
<li><a href="{{ object.get_absolute_url }}">{{ object.name }}</a>
{% indicate_alerts object %}
</li>

<a class="pull-right flip" href="{{ object.get_widgets_url }}">
<img src="{% url 'widget-image' project=object.project.slug component=object.slug widget='svg' color='badge' extension='svg' %}" />
</a>
{% endblock %}

{% block content %}

{% whiteboard_messages component=object %}

{% perm 'meta:vcs.status' object as user_can_see_repository_status %}
{% perm 'vcs.commit' object as user_can_commit_translation %}
{% 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 %}

{% include "show-component-state.html" %}

<ul class="nav nav-pills">
  <li class="active"><a href="#translations" data-toggle="tab">{% trans "Translations" %}</a></li>
  <li><a href="#information" data-toggle="tab">{% trans "Info" %}</a></li>
  {% if alerts %}
  <li><a href="#alerts" data-toggle="tab">{% trans "Alerts" %}</a></li>
  {% endif %}
  <li><a href="#search" data-toggle="tab">{% trans "Search" %}</a></li>
  <li><a href="{% url 'show_dictionaries' project=object.project.slug %}" data-toggle="tab">{% trans "Glossaries" %}</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      {% trans "Insights" %} <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#history" data-toggle="tab">{% trans "History" %}</a></li>
      <li><a href="#activity" data-toggle="tab" data-load="activity" data-yearly="{% url 'yearly_activity' project=object.project.slug component=object.slug %}" data-monthly="{% url 'monthly_activity' project=object.project.slug component=object.slug %}">{% trans "Activity" %}</a></li>
      <li><a href="{% url 'export_stats' project=object.project.slug component=object.slug %}?format=csv">{% trans "Download statistics (CSV)" %}</a></li>
      <li><a href="{% url 'export_stats' project=object.project.slug component=object.slug %}?format=json">{% trans "Download statistics (JSON)" %}</a></li>
      {% if user_can_view_reports %}
      <li><a href="#reports" data-toggle="tab">{% trans "Translation reports" %}</a></li>
      {% endif %}
    </ul>
  </li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      {% trans "Tools" %} <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      {% if replace_form %}
      <li><a href="#replace" data-toggle="tab">{% trans "Search and replace" %}</a></li>
      {% endif %}
      {% if bulk_state_form %}
      <li><a href="#bulk-state" data-toggle="tab">{% trans "Bulk status change" %}</a></li>
      {% endif %}
      <li><a href="{% url 'data_project' project=object.project.slug  %}">{% trans "Data exports" %}</a></li>
      <li><a href="{% url 'checks' %}?project={{ object.project.slug }}">{% trans "Failing checks" %}</a></li>
      <li><a href="{% url 'checks' %}?project={{ object.project.slug }}&amp;ignored=true">{% trans "Ignored checks" %}</a></li>
      <li><a href="{% url 'matrix' project=object.project.slug component=object.slug %}">{% trans "Matrix view" %}</a></li>
      <li><a href="{% url 'show_source' project=object.project.slug component=object.slug %}">{% trans "Source strings review" %}</a></li>
      {% if object.can_add_language and user_can_add_translation %}
      <li><a href="{% url "new-language" project=object.project.slug component=object.slug %}">{% trans "Start new translation" %}</a></li>
      {% endif %}
    </ul>
  </li>
  {% if user.is_authenticated %}
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      {% trans "Manage" %} <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      {% if user_can_commit_translation %}
      <li><a href="{{ object.get_commit_url }}" class="link-post">{% trans "Commit" %}</a></li>
      {% endif %}
      {% if user_can_see_repository_status %}
      <li><a href="#repository" data-toggle="tab" data-href="{% url 'git_status_component' project=object.project.slug component=object.slug %}">{% trans "Repository maintenance" %}</a></li>
      <li role="separator" class="divider"></li>
      {% endif %}
      <li><a href="{% url 'screenshots' project=object.project.slug component=object.slug %}">{% trans "Screenshots" %}</a></li>
      <li><a href="{% url 'memory' project=object.project.slug %}">{% trans "Translation memory" %}</a></li>
      {% if whiteboard_form %}
      <li><a href="#whiteboard" data-toggle="tab">{% trans "Add a component message" %}</a></li>
      {% endif %}
      {% if user_can_manage_acl %}
      <li><a href="{% url 'manage-access' project=object.project.slug %}">{% trans "Users" %}</a></li>
      {% endif %}
      {% if user_can_edit_component %}
      <li><a href="{% url 'addons' project=object.project.slug component=object.slug %}">{% trans "Addons" %}</a></li>
      <li><a href="{% url 'settings' project=object.project.slug component=object.slug %}">{% trans "Settings" %}</a></li>
      {% endif %}
      {% if delete_form or rename_form %}
      <li role="separator" class="divider"></li>
      <li><a href="#rename" data-toggle="tab">{% trans "Rename" %}</a></li>
      <li><a href="#delete" data-toggle="tab">{% trans "Removal" %}</a></li>
      {% endif %}
    </ul>
  </li>
  {% endif %}
{% if enable_sharing %}
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      {% trans "Share" %} <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
{% with object.get_share_url as share_url and object.get_widgets_url as widgets_url %}
      <li><a href="https://www.facebook.com/sharer.php?u={{ share_url }}">{% trans "Share on Facebook" %}</a></li>
      <li><a href="https://twitter.com/share?text={% blocktrans %}Translate {{ object }} using %23Weblate at {{ share_url }}!{% endblocktrans %}">{% trans "Tweet this translation!" %}</a></li>
      <li><a href="{% url 'engage' project=object.project.slug %}">{% trans "Engage page" %}</a></li>
      <li><a href="{{ widgets_url }}">{% trans "Status widgets" %}</a></li>
{% endwith %}
    </ul>
  </li>
{% endif %}
{% with project=object.project component=object %}
{% include "watch-dropdown.html" %}
{% endwith %}
</ul>


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

{% include "snippets/list-objects.html" with skip_table_end=1 objects=translations name_template="snippets/list-language-name.html" label=_("Language") %}

{% if object.can_add_language %}
<tfoot>
<tr>
<td colspan="9">
{% if user_can_add_translation %}
<a class="btn btn-primary" href="{% url "new-language" project=object.project.slug component=object.slug %}">{% trans "Start new translation" %}</a>
{% else %}
<button disabled="disabled" class="btn btn-primary text-tooltip" title="{% if user.is_authenticated %}{% trans "You don't have permission to start a new translation" %}{% else %}{% trans "Please log in to start new translation"%}{% endif %}">{% trans "Start new translation" %}</button>
{% endif %}
</td>
</tr>
</tfoot>
{% endif %}
</table>

<p>{% include "legend.html" %}</p>

</div>

<div class="tab-pane" id="alerts">
{% for alert in alerts %}
<div class="panel panel-warning">
<div class="panel-heading">{{ alert }}</div>
<div class="panel-body">{{ alert.render }}</div>
<div class="panel-footer">{{ alert.timestamp|naturaltime }}</div>
</div>
{% endfor %}
</div>

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

<table class="table table-striped">
{% include "component_info.html" %}
{% include "project_stats.html" %}
</table>

</div>


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

<form action="{% url 'search' project=object.project.slug component=object.slug %}" method="GET" data-persist="search-component">
{{ search_form|crispy }}
<input type="submit" value="{% trans "Search" %}" class="btn btn-primary" />
</form>

</div>

{% if replace_form %}
<div class="tab-pane" id="replace">
<form action="{% url 'replace' project=object.project.slug component=object.slug %}" method="post" enctype="multipart/form-data">
<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "Search and replace" %}</h4></div>
<div class="panel-body">
<p>{% trans "You can substitute all instances of a string. The search is a simple substring case sensitive search." %}</p>
{% csrf_token %}
{{ replace_form|crispy }}
</div>
<div class="panel-footer">
<input type="submit" value="{% trans "Process" %}" class="btn btn-primary" />
</div>
</div>
</form>
</div>
{% endif %}

{% if bulk_state_form %}
<div class="tab-pane" id="bulk-state">
<form action="{% url 'state-change' project=object.project.slug component=object.slug %}" method="post" enctype="multipart/form-data">
<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "Bulk status change" %}</h4></div>
<div class="panel-body">
<p>{% trans "You can change the state of all strings matching a given type at once." %}</p>
{% csrf_token %}
{{ bulk_state_form|crispy }}
</div>
<div class="panel-footer">
<input type="submit" value="{% trans "Process" %}" class="btn btn-primary" />
</div>
</div>
</form>
</div>
{% endif %}

<div class="tab-pane" id="history">
{% include "last-changes-content.html" %}
<a class="btn btn-primary" href="{% url 'changes' %}?{{ last_changes_url }}">{% trans "Browse all component changes" %}</a>
</div>

{% include "activity-tab.html" %}

{% if whiteboard_form %}
<div class="tab-pane" id="whiteboard">
<form action="{% url 'whiteboard_component' project=object.project.slug component=object.slug %}" method="post">
<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "Add a component message" %}</h4></div>
<div class="panel-body">
{% csrf_token %}
{{ whiteboard_form|crispy }}
<p class="help-block">{% trans "The message is shown for all translations within the component, until its given expiry, or permanently until it is deleted." %}</p>
</div>
<div class="panel-footer">
<input type="submit" value="{% trans "Add" %}" class="btn btn-primary" />
</div>
</form>

</div>
</div>
{% endif %}

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

{% if rename_form %}
<div class="tab-pane" id="rename">

<form method="post" action="{% url 'rename' project=object.project.slug component=object.slug %}">
<div class="panel panel-warning">
<div class="panel-heading"><h4 class="panel-title">{% trans "Rename component" %}</h4></div>
<div class="panel-body">
<div class="form-group">
<p>{% trans "Renaming the component will change all its URLs, users will have to update bookmarks or references in cloned repositories!" %}</p>
</div>
{% crispy rename_form %}
</div>
<div class="panel-footer">
<input type="submit" class="btn btn-warning" value="{% trans "Rename" %}">
</div>
</div>
</form>

<form method="post" action="{% url 'move' project=object.project.slug component=object.slug %}">
<div class="panel panel-warning">
<div class="panel-heading"><h4 class="panel-title">{% trans "Move component" %}</h4></div>
<div class="panel-body">
<div class="form-group">
<p>{% trans "Moving the component will change all its URLs, users will have to update bookmarks or references in cloned repositories!" %}</p>
</div>
{% crispy move_form %}
</div>
<div class="panel-footer">
<input type="submit" class="btn btn-warning" value="{% trans "Move" %}">
</div>
</div>
</form>

</div>
{% endif %}


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

{% if user_can_view_reports %}
<div class="tab-pane" id="reports">
<div class="row">
<div class="col-lg-6">
<form action="{% url 'credits' project=object.project.slug component=object.slug %}" method="post" enctype="multipart/form-data">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
{% documentation_icon 'devel/reporting' 'credits' right=True %}
{% trans "Credits" %}
</h4>
</div>
<div class="panel-body">
<p>{% trans "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="panel-footer">
<input type="submit" value="{% trans "Generate" %}" class="btn btn-primary" />
</div>
</div>
</form>
</div>
<div class="col-lg-6">
<form action="{% url 'counts' project=object.project.slug component=object.slug %}" method="post" enctype="multipart/form-data">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
{% documentation_icon 'devel/reporting' 'stats' right=True %}
{% trans "Contributor stats" %}
</h4>
</div>
<div class="panel-body">
<p>{% trans "Reports the number of strings and words translated by each translator." %}</p>
{% crispy reports_form %}
</div>
<div class="panel-footer">
<input type="submit" value="{% trans "Generate" %}" class="btn btn-primary" />
</div>
</div>
</form>
</div>
</div>
</div>
{% endif %}

</div>



</div>

{% endblock %}
