uccser/cs-field-guide

{% extends interactive_mode_template %}

{% load i18n %}
{% load static %}

{% block interactive_html %}
  <div class="row mb-3 mx-1 uninteractive bordered">

    <!-- Header -->
    <div class="col-7">
      <div class="row">

        <!-- Addresses -->
        <div class="col-4">
          <div class="row size-half text bordered bottom-bordered">
            {% trans 'Address<br>to' %}
          </div>
          <div class="row size-half text">
            {% trans 'Address<br>from' %}
          </div>
        </div>

        <!-- Numbers -->
        <div class="col-4 bordered left-bordered">
          <div class="row size-half text bordered bottom-bordered">
            {% trans 'ACK<br>number<br>(if ack)' %}
          </div>
          <div class="row size-half text">
            {% trans 'Packet<br>number' %}
          </div>
        </div>

        <!-- Flags -->
        <div class="col-4 bordered left-bordered">
            <div class="row size-five-sixths bordered bottom-bordered">
              <div class="col">
                <div class="row size-one-sixth bordered bottom-bordered grey-border">
                </div>
                <div class="row size-one-sixth text center-text bordered bottom-bordered grey-border">
                  {% trans 'Flags' %}
                </div>
                <div class="row size-one-sixth text center-text bordered bottom-bordered grey-border">
                  {% trans 'and' %}
                </div>
                <div class="row size-one-sixth text center-text bordered bottom-bordered grey-border">
                  {% trans 'options' %}
                </div>
                <div class="row size-one-sixth bordered bottom-bordered">
                </div>
              </div>
            </div>
            <div class="row size-one-sixth text center-text">
              {% trans 'Checksum' %}
            </div>
        </div>
      </div>
    </div>

    <!-- Data -->
    <div class="col-5 text big-text center-text bordered left-bordered">
      {% trans 'Data' %}
    </div>
  </div>
{% endblock interactive_html %}

{% block interactive_css %}
  <link rel="stylesheet" href="{% static 'interactives/tcp-segment/css/tcp-segment.css' %}">
{% endblock interactive_css %}