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

<div class="modal fade" tabindex="-1" role="dialog" id="modal_list_models_{{ key.id }}"
     aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content m_content" style="width: 450px; margin-left: auto; margin-right: auto;">
            <div class="modal-header m_head">
                <h4 id="edit_setting_title" style="font-size: 16px;"
                    class="modal-title">{% trans 'List models modal title' %}</h4>
                <button type="button" data-dismiss="modal" class="close mt-25 pull-right m_close" aria-label="Close"
                        style="color: white;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="padding: 0 0; font-size: 12px; border-radius: 4px;">
                <table class="table_modal_list_models" id="table_modal_list_models_{{ key.id }}"
                       style="width: 410px; margin-left: 20px; margin-top: 29px;{% if key.models|length == 0 %} display: none;{% endif %}">
                        {% for model in key.models %}
                            <tr id="table_modal_list_models_row_{{ key.id }}_{{ forloop.counter }}"
                                data-first-training="{{ model.is_first_training|yesno:'true,false' }}"
                                style="border-top-color: #D5E4F3; border-top-width: 1.5px; border-top-style: solid;">
                                <input hidden id="table_modal_list_models_model_name_{{ key.id }}_{{ forloop.counter }}"
                                       value="{{ model.name }}">
                                <td style="width: 70%; padding: 0;">
                                    {% if model.complete == 'True' %}
                                        <img id="table_modal_list_models_img_{{ key.id }}_{{ forloop.counter }}"
                                             src="{% static 'my_waf/img/ai_on.png' %}"
                                             alt="" style="margin-right: 5px; width: 14px;"
                                             title="{% trans 'The model is used' %}">
                                    {% else %}
                                        <img id="table_modal_list_models_img_{{ key.id }}_{{ forloop.counter }}"
                                             src="{% static 'my_waf/img/ai_off.png' %}"
                                             alt="" style="margin-right: 5px; width: 14px;"
                                             title="{% trans 'The model is being retrained' %} {% if model.progress != 'none' %}({{ model.progress }}%) {% endif %}">
                                    {% endif %}
                                    <span id="table_modal_list_models_name_{{ key.id }}_{{ forloop.counter }}"
                                          class="vhost-model-name {% if model.complete == 'True' %}vhost-model-name--active{% elif model.complete == 'none' or model.is_first_training %}vhost-model-name--pending{% else %}vhost-model-name--training{% endif %}"
                                          title="{% if model.complete == 'True' %}{% trans 'The model is used' %}{% else %}{% trans 'The model is being retrained' %} {% if model.progress != 'none' %}({{ model.progress }}%) {% endif %}{% endif %}">{{ model.name }}</span>
                                </td>
                                <td style="width: 30%; padding-right: 0; padding-left: 0;">
                                    <button type="button"
                                            title="{% trans 'Model training button' %}"
                                            style="margin-left: 5px; padding: 0; margin-top: 5px;"
                                            onclick="show_modal_model_training('{{ key.id }}','{{ forloop.counter }}')"
                                            class="btn action">
                                        <i class="fa fa-repeat" aria-hidden="true"></i>
                                    </button>

                                    {% if not model.is_first_training %}
                                    <button type="button" title="{% trans 'Model copy button' %}"
                                            style="margin-left: 5px; padding: 0; margin-top: 5px;"
                                            onclick="show_modal_copy_model('{{ key.id }}','{{ model.name }}')"
                                            class="btn action"><i
                                            class="fa fa-clone" aria-hidden="true"></i></button>
                                    {% endif %}

                                    <button type="button" title="{% trans 'Model edit period button' %}"
                                            style="margin-left: 5px; padding: 0; margin-top: 5px;"
                                            onclick="show_model_retraining_row('{{ key.id }}','{{ forloop.counter }}')"
                                            class="btn action"><i
                                            class="fa fa fa-pencil" aria-hidden="true"></i></button>

                                    {% if not model.is_first_training %}
                                    <button type="button" title="{% trans 'Model delete button' %}"
                                            style="margin-left: 5px; padding: 0; margin-top: 5px;"
                                            onclick="show_modal_model_delete('{{ key.id }}','{{ forloop.counter }}')"
                                            class="btn action"><i
                                            class="fa fa-times-circle" aria-hidden="true"></i></button>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr id="table_modal_list_models_retraining_row_{{ key.id }}_{{ forloop.counter }}"
                                style="height: 54px; display: none;">

                                <td style="color: #285283; background-color: #D5E4F3; background-clip: content-box; font-size: 11px; font-weight: 501; padding-left: 0; padding-right: 0;">
                                    <span style="padding-left: 11px;">{% trans 'Model training modal enter training period' %}</span><input
                                        id="modal_list_models_retraining_duration_{{ key.id }}_{{ forloop.counter }}"
                                        style="border-radius: 4px; border: 1.5px solid #D5E4F3; margin-left: 5px; padding-top: 2px; font-size: 12px; height: 27px; width: 45px;">
                                </td>
                                <td style="background-color: #D5E4F3; background-clip: content-box; padding-left: 0; padding-right: 0;">
                                    <button type="button"
                                            title="{% trans 'Edit setting save button' %}"
                                            style="margin-left: -32px; font-size: 10px; padding: 3px 6px; border-radius: 3px;"
                                            onclick="set_model_retraining_duration('{{ key.id }}','{{ forloop.counter }}')"
                                            class="btn btn-default m_btn save_button">{% trans 'Edit setting save button' %}
                                    </button>
                                    <button type="button" title="{% trans 'Cancel Modal button' %}"
                                            style="font-size: 10px; margin-left: 4px; padding: 3px 6px; border-radius: 3px; background-color: #FFFFFF"
                                            onclick="hide_model_retraining_row('{{ key.id }}','{{ forloop.counter }}')"
                                            class="btn action">{% trans 'Cancel Modal button' %}
                                    </button>
                                </td>
                            </tr>

                        {% endfor %}
                </table>
                <span id="table_modal_list_models_empty_{{ key.id }}"
                      style="{% if key.models|length == 0 %}display: block; padding: 30px 10px;{% else %}display: none;{% endif %} font-size: 16px; margin-left: 100px;">
                    {% trans 'There are no behavioral models' %}
                </span>
                
                

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