{% load i18n %}
{% load static %}
{% load translations %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_BIDI %}rtl{% else %}ltr{% endif %}">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{{ subject }}</title>
  <style>
button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
html,
body {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
body {
	font-family: 'Source Sans Pro', Arial, sans-serif;
	color: #2A3744;
	font-size: 16px;
	letter-spacing: normal;
	font-weight: 400;
	transition: all .5s cubic-bezier(.645, .045, .355, 1);
	overflow-x: hidden;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
}
a {
	transition: all 300ms linear;
	-webkit-transition: all 300ms linear;
	text-decoration: none;
}
p, pre {margin: 0;}
.row {
	margin: 0 auto;
	max-width: 800px;
	width: 100%;
	padding: 0 20px;
}
.content {
	padding: 30px 0;
}
.footer {
	background-color: #144D3F;
	padding: 0 0 80px 0;
	width: 100%;
	float: left;
	color: #fff;
	font-size: 18px;
	position: relative;
}
.footer .f-logo {
    text-align: center;
	width: 100%;
    height: 150px;
    display: block;
}
.footer .footer-left, .footer .footer-right {
	width: 50%;
	float: left;
	font-size: 14px;
	color: #2ECCAA;
}
.footer .footer-left a, .footer .footer-right a {
	color: #2ECCAA;
	text-decoration: underline;
}
.footer .footer-left a:hover, .footer .footer-right a:hover {
	text-decoration: none;
}
.footer .footer-right {
	width: 50%;
	text-align: right;
}
.box {
	width: 100%;
	float: left;
	border-radius: 20px;
	padding-bottom: 14px;
	background-color: #FFFFFF;
	margin-bottom: 30px;
	box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
}
.box h1 {
	width: 100%;
	float: left;
	padding: 14px 30px;
	font-size: 28px;
    font-weight: normal;
	letter-spacing: -0.5px;
	line-height: 36px;
	margin: 0;
	color: #2A3744;
	border-bottom: 1px solid #E9EAEC;
}
.box h2 {
	width: 100%;
	float: left;
	padding: 7px 30px;
	font-size: 20px;
    font-weight: bold;
	letter-spacing: -0.5px;
	line-height: 22px;
	margin: 0;
	color: #2A3744;
}
.box .bordered, .box .buttons, .box h2 {
	border-top: 1px solid #E9EAEC;
}
.box .nav {
	border-bottom: 1px solid #E9EAEC;
    margin-bottom: 5px;
    background-color: #eee;
    color: #2A3744;
}
.box .line, .box p, .box .list-group, .box code, .box pre, .box ul, .box ol, .box table, .box .nav {
	width: 100%;
	float: left;
	padding: 7px 30px;
}
.box ol, .box ul {
    margin-left: 20px;
}
.box code, .box pre {
	word-wrap: break-word;
    white-space: pre-wrap;
}
.box .buttons {
    padding-top: 18px;
}
.box .line-left {
	width: 50%;
	float: left;
}
.box .line-right {
	width: 50%;
	float: left;
}
.box .head {
	font-size: 28px;
	letter-spacing: -0.5px;
	line-height: 36px;
}
a {
	color: #1FA385;
	text-decoration: underline;
}
a.button {
	background: #2ECCAA;
	height: 50px;
	min-width: 180px;
	color: #fff;
	font-size: 18px;
	line-height: 48px;
	border: 1px solid transparent;
	padding: 10px 25px;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.4px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px !important;
	text-decoration: none;
    text-shadow: none;
    display: inline;
}
a.button:hover {
	background-color: #fff;
	color: #2ECCAA;
	border-color: #2ECCAA;
}
@media (max-width: 790px) {
	footer .footer-left, footer .footer-right {width: 100%;}
    footer .footer-left, footer .footer-right {text-align: center;}
	.box .line-left, .box .line-right {width: 100%;}
	.box .line .line-left {padding-left: 0; margin-bottom: 10px;}
}
.translatetext {
    background-color: #eee;
}
ins {
    background-color: lightgreen;
}
del {
    background-color: #fc7979;
}
  </style>
 </head>

 <body>
    <div class="content">
    <div class="row">
        <div class="box">
            {% if change %}
            <h1>{{ change.get_action_display }}</h1>
            <div class="nav">
                {% if project %}<a href="{{ current_site_url }}{{ project.get_absolute_url }}">{{ project.name }}</a>{% endif %}
                {% if component %}/ <a href="{{ current_site_url }}{{ component.get_absolute_url }}">{{ component.name }}</a>{% endif %}
                {% if translation %}/ <a href="{{ current_site_url }}{{ translation.get_absolute_url }}">{{ translation.language.name }}</a>{% endif %}
            </div>
            {% else %}
            <h1>{{ subject }}</h1>
            {% endif %}
            {% block content %}
            {% endblock %}
        </div>
    </div>
    <div class="row">
{% if translation %}
        <div class="box">
            <h1>
                {% trans "Translation Information" %}
            </h1>
            <div class="line">
                <div class="line-left">{% get_filter_name "all" %}</div>
                <div class="line-right">{{ translation.stats.all }}</div>
            </div>
            <div class="line">
                <div class="line-left">{% get_filter_name "translated" %}</div>
                <div class="line-right">{{ translation.stats.translated }} ({{ translation.stats.translated_percent }}%)</div>
            </div>
            <div class="line">
                <div class="line-left">{% get_filter_name "nottranslated" %}</div>
                <div class="line-right">{{ translation.stats.nottranslated }} ({{ translation.stats.nottranslated_percent }}%)</div>
            </div>
            <div class="line">
                <div class="line-left">{% get_filter_name "todo" %}</div>
                <div class="line-right">{{ translation.stats.todo }} ({{ translation.stats.todo_percent }}%)</div>
            </div>
            <div class="line">
                <div class="line-left">{% get_filter_name "fuzzy" %}</div>
                <div class="line-right">{{ translation.stats.fuzzy }} ({{ translation.stats.fuzzy_percent }}%)</div>
            </div>
            <div class="line buttons">
                <a class="button" href="{{ translation_url }}">{% trans "View" %}</a>
            </div>
        </div>
{% elif component %}
        <div class="box">
            <h1>
                {% trans "Component Information" %}
            </h1>
            <div class="line">
                <div class="line-left">{% trans "Languages" %}</div>
                <div class="line-right">{{ component.stats.languages }}</div>
            </div>
            <div class="line">
                <div class="line-left">{% get_filter_name "all" %}</div>
                <div class="line-right">{{ component.stats.all }}</div>
            </div>
            <div class="line">
                <div class="line-left">{% get_filter_name "translated" %}</div>
                <div class="line-right">{{ component.stats.translated }} ({{ component.stats.translated_percent }}%)</div>
            </div>
            <div class="line buttons">
                <a class="button" href="{{ current_site_url }}{{ component.get_absolute_url  }}">{% trans "View" %}</a>
            </div>
        </div>
{% elif project %}
        <div class="box">
            <h1>
                {% trans "Project Information" %}
            </h1>
            <div class="line">
                <div class="line-left">{% trans "Components" %}</div>
                <div class="line-right">{{ project.component_set.count }}</div>
            </div>
            <div class="line">
                <div class="line-left">{% trans "Languages" %}</div>
                <div class="line-right">{{ project.stats.languages }}</div>
            </div>
            <div class="line">
                <div class="line-left">{% get_filter_name "all" %}</div>
                <div class="line-right">{{ project.stats.all }}</div>
            </div>
            <div class="line">
                <div class="line-left">{% get_filter_name "translated" %}</div>
                <div class="line-right">{{ project.stats.translated }} ({{ project.stats.translated_percent }}%)</div>
            </div>
            <div class="line buttons">
                <a class="button" href="{{ current_site_url }}{{ project.get_absolute_url  }}">{% trans "View" %}</a>
            </div>
        </div>
{% endif %}
    </div>
    </div>
    <div class="footer">
    	<div class="row">
            <a class="f-logo" href="https://weblate.org/">
                <img src="{% if request %}{{ current_site_url }}{% static "email-logo.png" %}{% else %}cid:email-logo@cid.weblate.org{% endif %}" />
            </a>
        </div>
        <div class="row">
			<div class="footer-left"><a href="https://weblate.org/">{% trans "Weblate, the continuous localization system" %}</a></div>
            <div class="footer-right">
                <a href="{{ current_site_url }}{% url 'profile' %}#notifications">{% trans "Notification settings" %}</a>
                {% if unsubscribe_nonce %}
                <a href="{{ current_site_url }}{% url 'unsubscribe' %}?i={{ unsubscribe_nonce }}">{% trans "Disable this notification" %}</a>
                {% endif %}
            </div>
		</div>
        <div class="row">
            {% comment %}This avoids Gmail hiding footer as it finds unique content here{% endcomment %}
            <span style="opacity: 0">Generated on {% now "DATETIME_FORMAT" %}</span>
        </div>
    </div>
 </body>
</html>
