{% load static %} <!-- Load static files -->
{% load i18n %}
{% block content %}

<div class="modal fade" id="sensorIRPillModal" tabindex="-1" role="dialog" aria-labelledby="sensorIRPillLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h3 class="modal-title" id="sensorIRPillLabel">{% trans "Sensor infrarrojo (IR) en Scratch" %}</h3>
            </div>
            <div class="modal-body" style="padding: 0px">
                <div id="loading_page" class="col-xs-12 loading-page">
                    <div id="presentation_column" width="100%" height="100%" frameBorder="0" style="padding: 20px; max-height: 100%;">
                        <div class="row" id="theory-title" style="text-align: justify; font-size:20px;" >
                            <div class="col-md-12">
                                <h2>{% trans "Uso del bloque:" %}<img src="{% static 'scratch/SSGop006/img/bloque_IR.png' %}" width=400px></h2>
                                <p>{% trans "Cada robot tiene dos sensores Infrarrojos (abreviado IR) en la parte frontal abajo, uno en la parte izquierda y otro en la parte derecha. Estos sensores son capaces de detectar si el suelo es oscuro (negro) o claro (blanco). Con este bloque podremos ver los valores en cada momento." %}</p>
                                <p>{% trans "Este bloque devolverá 4 valores posibles:" %}</p>
                                <figure>
                                    <table class="componentes" style="text-align:center; margin:auto;">
                                        <tr>
                                            <th>{% trans "Valor" %}</th>
                                            <th>{% trans "Significado" %}</th>
                                            <th>{% trans "Situación" %}</th>
                                        </tr>
                                        <tr>
                                            <td><code>0</code></td>
                                            <td>{% trans "Los dos sensores detectan negro. El robot está sobre la línea negra." %}</td>
                                            <td><img src="{% static 'scratch/SSGop006/img/zero.png' %}" width="150px"></td>
                                        </tr>
                                        <tr>
                                            <td><code>1</code></td>
                                            <td>{% trans "La línea negra se encuentra a la izquierda del robot" %}</td>
                                            <td><img src="{% static 'scratch/SSGop006/img/one.png' %}" width="150px"></td>
                                        </tr>
                                        <tr>
                                            <td><code>2</code></td>
                                            <td>{% trans "La línea negra se encuentra a la derecha del robot" %}</td>
                                            <td><img src="{% static 'scratch/SSGop006/img/two.png' %}" width="150px"></td>
                                        </tr>
                                        <tr>
                                            <td><code>3</code></td>
                                            <td>{% trans "El robot está completamente fuera de la línea negra" %}</td>
                                            <td><img src="{% static 'scratch/SSGop006/img/three.png' %}" width="150px"></td>
                                        </tr>
                                    </table>
                                </figure>
                                <div class="col-md-12 " id="theory-container">
                                    <h2>{% trans "En este video puedes ver un ejemplo de su funcionamiento" %}</h2>
                                    <div class="unit-video-container">
										<iframe class="unit-video" allowfullscreen src="https://www.youtube.com/embed/rAldaeiQjNw"></iframe>
									</div>
                                    <p style="text-align:center">{% trans "¿Tienes alguna duda? Pregunta en nuestro" %} <a href="https://foro.kibotics.org/"><strong>{% trans "Foro" %}</strong></a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

{% endblock %}