{% extends 'doc/es/base.html' %}
{% load static %}
{% block content %}
<h2 class="text-white"><blitztext>Blitz Work</blitztext> provee tres plantillas base, una para trabajo en l&iacute;nea y dos para trabajo sin conexi&oacute;n.</h2>
<p class="text-white">Las plantillas que ofrece <blitztext>Blitz Work</blitztext> utilizan las siguientes bibliotecas y frameworks:</p>
<ul>
<li class="text-white">Bootstrap</li>
<li class="text-white">Jquery</li>
<li class="text-white">Popper</li>
<li class="text-white">Select2</li>
<li class="text-white">
    Adem&aacute;s <blitztext>Blitz Work</blitztext>  utiliza en sus plantillas <a href="{% url 'blitz-doc-blitz-js-es' %}"><blitztext>Blitz Work JS</blitztext></a>, este ejecuta las funciones de selecci&oacute;n de las listas, la b&uacute;squeda con AJAX y otros.
</li>
</ul>
<ol>
    <li class="text-white">
        <h6 class="text-white">Plantilla con conexi&oacute;n.</h6>
        {% verbatim %}
        <pre>
            <code>
&lt;!DOCTYPE html&gt;
&lt;html lang="{% block language %}en{% endblock language %}"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"&gt;
        &lt;link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /&gt;
        &lt;link rel="stylesheet" href="{% static 'css/all.min.css' %}"&gt;
        &lt;link rel="stylesheet" href="{% static 'css/select2-bootstrap.min.css' %}"&gt;
        &lt;link rel="stylesheet" href="{% static 'css/blitz.css' %}"&gt;
        &lt;script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"&gt;&lt;/script&gt;
        &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"&gt;&lt;/script&gt;
        &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"&gt;&lt;/script&gt;
        &lt;script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"&gt;&lt;/script&gt;
        &lt;script src="{% static 'js/blitz.js' %}"&gt;&lt;/script&gt;
        {% block extra_assets %}{% endblock %}
        &lt;title&gt;
            {% block title %}{% endblock %}
        &lt;/title&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
        {% block main %}{% block content %}{% endblock %}{% endblock %}
    &lt;/body&gt;
&lt;/html&gt;
            </code>
        </pre>
        {% endverbatim %}
    </li>
    <li class="text-white">
        <h6 class="text-white">Plantilla sin conexi&oacute;n 1.</h6>
<pre>
    <code>
    {% verbatim %}
&lt;!DOCTYPE html&gt;
&lt;html lang="{% block language %}en{% endblock language %}"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"&gt;
        &lt;link rel="stylesheet" href="{% static 'css/select2.min.css' %}"&gt;
        &lt;link rel="stylesheet" href="{% static 'css/select2-bootstrap.min.css' %}"&gt;
        &lt;link rel="stylesheet" href="{% static 'css/all.min.css' %}"&gt;
        &lt;link rel="stylesheet" href="{% static 'css/blitz.css' %}"&gt;
        &lt;script src="{% static 'js/jquery-3.5.1.min.js' %}"&gt;&lt;/script&gt;
        &lt;script src="{% static 'js/popper.min.js' %}"&gt;&lt;/script&gt;
        &lt;script src="{% static 'js/bootstrap.min.js' %}"&gt;&lt;/script&gt;
        &lt;script src="{% static 'js/select2.min.js' %}"&gt;&lt;/script&gt;
        &lt;script src="{% static 'js/blitz.js' %}"&gt;&lt;/script&gt;
        {% block extra_assets %}{% endblock %}
        &lt;title&gt;
            {% block title %}{% endblock %}
        &lt;/title&gt;
    &lt;/head&gt;

    &lt;body&gt;
        {% block main %}{% block content %}{% endblock %}{% endblock %}
    &lt;/body&gt;
&lt;/html&gt;
    {% endverbatim %}
    </code>
</pre>
</li>
<li class="text-white">
    <h6 class="text-white">Plantilla sin conexi&oacute;n 2. Esta platilla incluye el modo oscuro.</h6>
    <p class="text-white">Para alternar entre modo oscuro y el modo normal solo es necesario cambiar el class del body. 
    Los valores posibles son ("bootstrap" y "bootstrap-dark").</p>
    <p class="text-white">Es posible usar tambi&eacute;n el switch por defecto de <blitztext>Blitz Work</blitztext>
    incluyendo la plantilla de switch.</p>
<pre>
    <code>
    {% verbatim %}
&lt;!DOCTYPE html&gt;
&lt;html lang="{% block language %}en{% endblock language %}"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;link rel="stylesheet" href="{% static 'css/toggle-bootstrap.min.css' %}"&gt;
        &lt;link rel="stylesheet" href="{% static 'css/toggle-bootstrap-dark.min.css' %}"&gt;
        &lt;link rel="stylesheet" href="{% static 'css/select2.min.css' %}"&gt;
        &lt;link rel="stylesheet" href="{% static 'css/select2-bootstrap-dark.min.css' %}"&gt;
        &lt;link rel="stylesheet" href="{% static 'css/all.min.css' %}"&gt;
        &lt;link rel="stylesheet" href="{% static 'css/blitz.css' %}"&gt;
        &lt;script src="{% static 'js/jquery-3.5.1.min.js' %}"&gt;&lt;/script&gt;
        &lt;script src="{% static 'js/popper.min.js' %}"&gt;&lt;/script&gt;
        &lt;script src="{% static 'js/bootstrap.min.js' %}"&gt;&lt;/script&gt;
        &lt;script src="{% static 'js/select2.min.js' %}"&gt;&lt;/script&gt;
        &lt;script src="{% static 'js/blitz.js' %}"&gt;&lt;/script&gt;
        {% block extra_assets %}{% endblock %}
        &lt;title&gt;
            {% block title %}{% endblock %}
        &lt;/title&gt;
    &lt;/head&gt;

    &lt;body class="{% block theme %}bootstrap{% endblock theme %}"&gt;
        {% block main %}{% block content %}{% endblock %}{% endblock %}
    &lt;/body&gt;
&lt;/html&gt;
    {% endverbatim %}
    </code>
</pre>
<p class="text-white">Incluir el switch.</p>
<pre><code>
{% verbatim  %}
{% include 'dark_mode_switch.html' %}
{% endverbatim  %}
</code></pre>
</li>
</ol>
<h2 class="text-white">Heredar de estas plantillas.</h2>
<ol>
<li class="text-white">
<h6 class="text-white">Plantilla con conexi&oacute;n.</h6>
<pre><code>
{% verbatim %}
{% extends 'blitz_base.html' %}
{% endverbatim %}
</code></pre>
</li>
<li class="text-white">
<h6 class="text-white">Plantilla sin conexi&oacute;n 1.</h6>
<pre><code>
{% verbatim %}
{% extends 'blitz_base_offline.html' %}
{% endverbatim %}
</code></pre>
</li>
<li class="text-white">
<h6 class="text-white">Plantilla sin conexi&oacute;n 2.</h6>
<pre><code>
{% verbatim %}
{% extends 'blitz_base_light_dark.html' %}
{% endverbatim %}
</code></pre>
</li>
</ol>
{% endblock content %}