{% extends base_template %}
{% load i18n %}
{% load repeatblock %}
{% load staticfiles %}

{% block update_active %}active{% endblock update_active %}
{% block title %}{% trans "Update" %}{% endblock %}


{% block headjs %}{{ block.super }}
    <script type="text/javascript" src="{% static "js/jquery-ui.custom.min.js" %}"></script>
    <script type="text/javascript" src="{% static "js/bootstrap.min.js" %}"></script>
{% endblock headjs %}

{% block headcss %}{{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}" />
    <style>
        p{
            min-height: 100px;
            max-height: 130px;
            margin-left: 10px;
        }

        h2{
        text-align: center;
        }

        a:link,a:visited{
          text-decoration:none;
        }

        .thumbnail>a>img{
          display: block;
          max-width: 100%;
          margin-right: auto;
          margin-left: auto;
        }

        a.btn:link,a.btn:visited{
          color: #fff;
        }

        .download{
          display: block;
          text-align: center;
        }
    </style>
{% endblock headcss %}

{% block content %}

<div>
<div class="row-fluid">
            <ul class="thumbnails">
              <li class="span4">
                <div class="thumbnail">
                  <a href="{% url update_software %}">
                    <img src="{% static 'images/system_update.png' %}" />
                  </a>
                    <div class="caption">
                      <h2>{% trans "System Updates" %}</h2>
                      <p>{% trans "Update KA Lite to the latest version to access the latest features." %}</p>
                      <span class="download"><a href="{% url update_software %}" class="btn btn-large btn-primary">{% trans "Update KA Lite" %}</a></span>
                    </div>
                </div>
              </li>

              <li class="span4">
                <div class="thumbnail">
                  <a href="{% url update_languages %}">
                    <img src="{% static 'images/subtitle_download.png' %}" />
                  </a>
                    <div class="caption">
                      <h2>{% trans "Language Packs" %}</h2>
                      <p>{% trans "Get KA Lite in the language of your choice!" %} {% trans "Browse and install language packs to get UI translations, subtitles, and more." %}</p>
                      <span class="download"><a href="{% url update_languages %}" class="btn btn-large btn-primary">{% trans "Get Language Packs" %}</a></span>
                    </div>
                </div>
              </li>

              <li class="span4">
                <div class="thumbnail">
                  <a href="{% url update_videos %}">
                    <img src="{% static 'images/video_download.png' %}" />
                  </a>
                    <div class="caption">
                      <h2>{% trans "Video Manage" %}</h2>
                      <p>{% trans "Dowload and delete videos on this KA Lite installation." %}</p>
                      <span class="download"><a href="{% url update_videos %}" class="btn btn-large btn-primary">{% trans "Download Videos" %}</a></span>
                    </div>
                </div>
              </li>
            </ul>
</div>

</div>
{% endblock content %}