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

{% block breadcrumbs %}
<li><a href="{{ object.component.project.get_absolute_url }}">{{ object.component.project }}</a></li>
<li><a href="{{ object.component.get_absolute_url }}">{{ object.component.name }}</a></li>
<li><a href="{{ object.get_absolute_url }}">{{ object.language }}</a></li>
<a class="pull-right flip" href="{{ object.get_widgets_url }}">
<img src="{% url 'widget-image' project=object.component.project.slug component=object.component.slug widget='svg' color='badge' lang=object.language.code extension='svg' %}?native=1" />
</a>
{% endblock %}

{% block content %}

{% whiteboard_messages component=object.component language=object.language %}

{% perm 'meta:vcs.status' object as user_can_see_repository_status %}
{% perm 'vcs.commit' object as user_can_commit_translation %}
{% perm 'upload.overwrite' object as user_can_overwrite_translation %}
{% perm 'upload.perform' object as user_can_upload_translation %}
{% perm 'unit.add' object as user_can_add_unit %}

{% get_translate_url object as translate_url %}

{% include "show-lock.html" with object=object.component %}
{% show_contributor_agreement object.component %}

<ul class="nav nav-pills">
  <li class="active"><a href="#overview" data-toggle="tab">{% trans "Overview" %}</a></li>
  <li><a href="#information" data-toggle="tab">{% trans "Information" %}</a></li>
  <li><a href="#search" data-toggle="tab">{% trans "Search" %}</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.component.project.slug component=object.component.slug lang=object.language.code %}" data-monthly="{% url 'monthly_activity' project=object.component.project.slug component=object.component.slug lang=object.language.code %}">{% trans "Activity" %}</a></li>
      <li><a href="#stats" data-toggle="tab">{% trans "Statistics" %}</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      {% trans "Files" %} <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
{% include "translation-download.html" %}
    </ul>
  </li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      {% trans "Tools" %} <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="{% url 'data_project' project=object.component.project.slug  %}">{% trans "Data exports" %}</a></li>
      {% if autoform %}
      <li><a href="#auto" data-toggle="tab">{% trans "Automatic translation" %}</a></li>
      {% endif %}
      {% if replace_form %}
      <li><a href="#replace" data-toggle="tab">{% trans "Search and replace" %}</a></li>
      {% endif %}
      {% if user_can_add_unit %}
      <li><a href="#new" data-toggle="tab">{% trans "Add new translation string" %}</a></li>
      {% endif %}
    </ul>
  </li>
  {% if user_can_see_repository_status %}
  <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_translation' project=object.component.project.slug component=object.component.slug lang=object.language.code %}">{% trans "Repository maintenance" %}</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.component.project.slug %}">{% trans "Engage page" %}</a></li>
      <li><a href="{{ widgets_url }}">{% trans "Status widgets" %}</a></li>
{% endwith %}
    </ul>
  </li>
{% endif %}
{% with object.component.project as project %}
{% include "watch-dropdown.html" %}
{% endwith %}
</ul>


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

<div class="panel panel-primary">
  <div class="panel-heading"><h4 class="panel-title">{% trans "Translation status" %}</h4></div>

{% if object.is_template %}
  <div class="panel-body">
{% trans "This translation is being used as source strings within this component." as msg %}
{% show_message "warning" msg %}
  </div>
{% endif %}

<table class="table">
<tr>
<th>{% trans "Strings" %}<span class="badge pull-right flip">{{ object.stats.all }}</span></th>
<td class="progress-cell">{% translation_progress object %}</td>
<td class="percent">{{ object.stats.translated_percent }}%</td>
<td rowspan="2">
<a href="{{ translate_url }}?type={% if object.stats.todo > 0 %}todo{% else %}all{% endif %}" class="pull-right flip btn btn-default"><i class="fa fa-pencil"></i> {% trans "Translate" %}</a>
</td>
</tr>

<tr>
<th>{% trans "Words" %}<span class="badge pull-right flip">{{ object.stats.all_words }}</span></th>
<td class="progress-cell">{% words_progress object %}</td>
<td class="percent">{{ object.stats.translated_words_percent }}%</td>
</tr>
</table>

  <div class="panel-body">
{% include "legend.html" %}

</div>
</div>

<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
{% documentation_icon 'user/translating' 'strings-to-check' right=True %}
{% trans "Strings to check" %}
</h4>
</div>
<div class="list-group">
{% for c in object.list_translation_checks %}
<a class="list-group-item list-group-item-{{ c.3 }}" href="{{ translate_url }}?type={{ c.0 }}">{% if c.4 %}<span class="badge">{% blocktrans count c.4 as count %}{{ count }} word{% plural %}{{ count }} words{% endblocktrans %}</span>{% endif %}<span class="badge">{{ c.2 }}</span>{{ c.1 }}</a>
{% endfor %}
</div>
</div>

{% if other_translations %}
<div class="panel panel-primary">
  <div class="panel-heading"><h4 class="panel-title">{% trans "Other components" %}</h4></div>
{% with other_translations as translations %}
{% include "list-translations.html" %}
{% endwith %}
    <div class="panel-body">{% include "legend.html" %}</div>
</div>
{% endif %}

</div>

<div class="tab-pane" id="information">
<div class="panel panel-primary">
  <div class="panel-heading"><h4 class="panel-title">{% trans "Project Information" %}</h4></div>

<table class="table">
{% with object.component as object %}
{% include "component_info.html" %}
{% endwith %}
<tr>
<th>{% trans "Translation file" %}</th>
<td>
<div class="dropdown pull-right flip">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" id="dropdownMenuDownload" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <i class="fa fa-download"></i> {% trans "Download" %}
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuDownload">
    {% include "translation-download.html" %}
  </ul>
</div>
{{ object.filename }}
</td>
</tr>
</table>
</div>
</div>


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


{% if autoform %}
<div class="tab-pane" id="auto">
<form action="{% url 'auto_translation' project=object.component.project.slug component=object.component.slug lang=object.language.code %}" method="post" enctype="multipart/form-data" data-persist="auto-translation">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
{% documentation_icon 'user/translating' 'auto-translation' right=True %}
{% trans "Automatic translation" %}
</h4>
</div>
<div class="panel-body">
<p>{% trans "Automatic translation takes existing translations in this project and applies them to the current component. It can be used to push translations to a different branch, to fix inconsistent translations or to translate a new component using translation memory." %}</p>
<p>{% trans "Automatic translation via machine translation uses active machine translation engines to get the best possible translations and applies them in this project." %}</p>
{% crispy autoform %}
</div>
<div class="panel-footer">
<input type="submit" value="{% trans "Process" %}" class="btn btn-default" />
</div>
</div>
</form>
</div>
{% endif %}

{% if replace_form %}
<div class="tab-pane" id="replace">

<form action="{% url 'replace' project=object.component.project.slug component=object.component.slug lang=object.language.code %}" 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 replace a string in all strings at once. 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-default" />
</div>
</div>
</form>

{% if mass_state_form %}
<form action="{% url 'state-change' project=object.component.project.slug component=object.component.slug lang=object.language.code %}" method="post" enctype="multipart/form-data">
<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "Mass state change" %}</h4></div>
<div class="panel-body">
<p>{% trans "You can change state of all strings matching given type at once." %}</p>
{% csrf_token %}
{{ mass_state_form|crispy }}
</div>
<div class="panel-footer">
<input type="submit" value="{% trans "Process" %}" class="btn btn-default" />
</div>
</div>
</form>
{% endif %}

</div>
{% endif %}

{% if user_can_add_unit %}
<div class="tab-pane" id="new">
<form action="{% url 'new-unit' project=object.component.project.slug component=object.component.slug lang=object.language.code %}" method="post">
<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "Add new translation string" %}</h4></div>
<div class="panel-body">
<p>{% trans "You can add new translation string here, it will automatically appear in all translations." %}</p>
{% csrf_token %}
{{ new_unit_form|crispy }}
</div>
<div class="panel-footer">
<input type="submit" value="{% trans "Process" %}" class="btn btn-default" />
</div>
</div>
</form>
</div>
{% endif %}

<div class="tab-pane" id="download">
<form action="{% url 'download_translation' project=object.component.project.slug component=object.component.slug lang=object.language.code %}" method="get" data-persist="download-translation">
<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "Customize download" %}</h4></div>
<div class="panel-body">
{% csrf_token %}
{{ download_form|crispy }}
</div>
<div class="panel-footer">
<input type="submit" value="{% trans "Download" %}" class="btn btn-default" />
</div>
</form>

</div>
</div>
{% if user_can_upload_translation %}
<div class="tab-pane" id="upload">
<form action="{% url 'upload_translation' project=object.component.project.slug component=object.component.slug lang=object.language.code %}" method="post" enctype="multipart/form-data" data-persist="upload-translation">
<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "Upload" %}</h4></div>
<div class="panel-body">
{% if user_can_overwrite_translation %}
<p>{% trans "The uploaded file will be merged with the current translation. In case you want to overwrite already translated strings, don't forget to enable it." %}</p>
{% else %}
<p>{% trans "The uploaded file will be merged with the current translation." %}</p>
{% endif %}
{% csrf_token %}
{{ form|crispy }}
</div>
<div class="panel-footer">
<input type="submit" value="{% trans "Upload" %}" class="btn btn-default" />
</div>
</form>

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

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

<div class="tab-pane" id="search">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">

<form action="{{ translate_url }}" method="GET" data-persist="search-translation">
<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "Search" %}</h4></div>
  <div class="panel-body">
{{ search_form|crispy }}
</div>
<div class="panel-footer">
<input type="submit" value="{% trans "Search" %}" class="btn btn-default" />
</div>
</div>
</form>

</div>

{% if review_form %}
<div class="col-lg-6">
<form action="{{ translate_url }}" method="GET">
<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "Review" %}</h4></div>
  <div class="panel-body">
<p>{% trans "Review translations touched by other users." %}</p>
{{ review_form|crispy }}
</div>
<div class="panel-footer">
<input type="submit" value="{% trans "Start review" %}" class="btn btn-default" />
</div>
</div>
</form>

</div>
{% endif %}

</div>
</div>
</div>

<div class="tab-pane" id="stats">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "Statistics" %}</h4></div>
<table class="table">
<thead>
<tr>
<td></td>
<th>{% trans "Percent" %}</th>
<th>{% trans "Strings" %}</th>
<th>{% trans "Words" %}</th>
</tr>
</thead>
<tbody>
<tr>
<th>{% trans "Total" %}</th>
<td class="percent"></td>
<td class="number">{{ object.stats.all }}</td>
<td class="number">{{ object.stats.all_words }}</td>
</tr>
<tr>
<th>{% trans "Translated" %}</th>
<td class="percent">{{ object.stats.translated_percent }}%</td>
<td class="number">{{ object.stats.translated }}</td>
<td class="number">{{ object.stats.translated_words }}</td>
</tr>
<tr>
<th>{% trans "Review" %}</th>
<td class="percent">{{ object.stats.fuzzy_percent }}%</td>
<td class="number">{{ object.stats.fuzzy }}</td>
<td class="number"></td>
</tr>
<tr>
<th>{% trans "Failing check" %}</th>
<td class="percent">{{ object.stats.allchecks_percent }}%</td>
<td class="number">{{ object.stats.allchecks }}</td>
<td class="number"></td>
</tr>
</tbody>
</table>

</div>

</div>


<div class="col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "Last activity" %}</h4></div>
<table class="table">
<tbody>
<tr>
<th>{% trans "Last change" %}<th>
<td class="number" colspan="3">{{ object.stats.last_changed }}</td>
</tr>
<tr>
<th>{% trans "Last author" %}<th>
<td class="number" colspan="3">{{ object.get_last_author }}</td>
</tr>
</tbody>
</table>
</div>
</div>

</div>
</div>

</div>

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

</div>

{% endblock %}
