{% extends 'base.html' %}
{% block content %}
<main class="content">
  <div class="container-fluid p-0">

    <div class="mb-3">
      <h1 class="h3 d-inline align-middle">Update Crop Translation</h1>
    </div>

    {% include 'partials/_messages.html' %}

    <form method="post" enctype="multipart/form-data">
      {% csrf_token %}

      <div class="col-6 col-xl-6">
        <div class="card">
          <div class="card-header">
            <h5 class="card-title">Translation Details</h5>
          </div>
          <div class="card-body">

            <div class="mb-3 row form-group required">
              <label class="col-form-label control-label col-sm-4 text-sm-end">Crop</label>
              <div class="col-sm-8">
                <select class="form-select" name="crop_id">
                  {% for c in crop_list %}
                    {% if c.id == crop_translation.crop_id %}
                      <option value="{{c.id}}" selected>{{c.name}}</option>
                    {% else %}
                      <option value="{{c.id}}">{{c.name}}</option>
                    {% endif %}
                  {% endfor %}
                </select>
              </div>
            </div>

            <div class="mb-3 row form-group required">
              <label class="col-form-label control-label col-sm-4 text-sm-end">Language</label>
              <div class="col-sm-8">
                <select class="form-select" name="language_id">
                  {% for l in language_list %}
                    {% if l.id == crop_translation.language_id %}
                      <option value="{{l.id}}" selected>{{l.name}} ({{l.code}})</option>
                    {% else %}
                      <option value="{{l.id}}">{{l.name}} ({{l.code}})</option>
                    {% endif %}
                  {% endfor %}
                </select>
              </div>
            </div>

            <div class="mb-3 row form-group required">
              <label class="col-form-label control-label col-sm-4 text-sm-end">Translation Name</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" name="name"
                       value="{{crop_translation.name}}">
              </div>
            </div>

          </div>
        </div>
      </div>

      <div class="col-6">
        <div class="card">
          <div class="card-body">
            <div class="col-12 text-sm-end">
              <a href="{% url 'view-crop-translation' id=crop_translation.id %}" class="btn btn-secondary mb-3 mt-3">Cancel</a>
              <button type="submit" class="btn btn-primary mb-3 mt-3">Update</button>
            </div>
          </div>
        </div>
      </div>

    </form>

  </div>
</main>
{% endblock %}