{% load i18n static waf_utils %}

<div class="backup-section tab-pane fade {{ class_2 }}" id="subtab_{{ key.id }}_{{ tab_name }}">
    <div class="backup-section__header">
        <h2 class="backup__title">{% trans "RB Copies Block Title" %}</h2>

        <div class="backup-section__create_buttons">
            {% if tab_name == "models" %}
            <select class="form-control" id="models-select" show-vhost-specific-backups>
                <option value="" selected hidden disabled> {% trans 'RB vhost select placeholder' %}</option>
                {% for option in model_hosts|dict_key:key.id %}
                    <option value="{{ option }}">{{ option }}</option>
                {% endfor %}
            </select>
            {% endif %}
            <input type="hidden" value="{{ model_hosts|dict_key:key.id|default:'null' }}" model-hosts>
            
            <button type="button" class="cabinet-btn" modal-create>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.91675 7H11.0834" stroke="#0A0A0A" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M7 2.91663V11.0833" stroke="#0A0A0A" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                {% trans "RB Create Copy Button" %}
            </button>
        </div>
        
    </div>

    {% with data=rollback_data|dict_key:key.id|dict_key:tab_name %}
    <div class="backup__list">
            {% for copy_id, copy in data.items %}
            
            <div class="backup__item {% if forloop.counter > 5 %} hidden {% endif %}" data-id="{{ copy_id }}" data-backup {% if tab_name == "models" %} data-vhost="{{ copy.vhost|default:'' }}" {% endif %} >
                <div class="backup__item-container">
                    <div class="backup__description">
                        <div class="backup__name">{% trans "RB copy timestamp" %} {{ copy.rbts|from_timestamp }}</div>
                        <div class="backup__comment-wrapper">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.08317 15.8333H6.6665C3.33317 15.8333 1.6665 15 1.6665 10.8333V6.66663C1.6665 3.33329 3.33317 1.66663 6.6665 1.66663H13.3332C16.6665 1.66663 18.3332 3.33329 18.3332 6.66663V10.8333C18.3332 14.1666 16.6665 15.8333 13.3332 15.8333H12.9165C12.6582 15.8333 12.4082 15.9583 12.2498 16.1666L10.9998 17.8333C10.4498 18.5666 9.54984 18.5666 8.99984 17.8333L7.74984 16.1666C7.6165 15.9833 7.30817 15.8333 7.08317 15.8333Z" stroke="#666666" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M5.8335 6.66663H14.1668" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M5.8335 10.8334H10.8335" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>

                            <p class="backup__comment">{{ copy.rbcm|first_n_words:3 }}</p>

                            {% if copy.rbcm|has_more_than_n_words:3 %}
                            <button class="backup__comment-open" type="button" data-toggle="collapse" data-target="#comment-extra-{{ copy_id }}">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M5 7.5L10 12.5L15 7.5" stroke="#666666" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </button>
                            {% endif %}

                        </div>

                        <div class="backup__comment-extra collapse" id="comment-extra-{{ copy_id }}" data-comment-extra>
                            <p class="backup__comment-full">{{ copy.rbcm }}</p>
                        </div>

                    </div>
                    <div class="backup__buttons">

                        <button class="cabinet-btn cabinet-btn-icon" type="button" title="{% trans 'RB copy apply' %}" modal-apply>
                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8.48734 12.6408C10.9898 11.9816 12.8332 9.70663 12.8332 6.99996C12.8332 3.77996 10.2432 1.16663 6.99984 1.16663C3.109 1.16663 1.1665 4.40996 1.1665 4.40996M1.1665 4.40996V1.74996M1.1665 4.40996H2.339H3.7565" stroke="#285283" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M1.1665 7C1.1665 10.22 3.77984 12.8333 6.99984 12.8333" stroke="#285283" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="3 3"/>
                            </svg>
                        </button>

                        <button class="cabinet-btn cabinet-btn-icon" type="button" title="{% trans 'RB copy delete' %}" modal-delete>
                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5.8335 6.41663V9.91663" stroke="#285283" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M8.1665 6.41663V9.91663" stroke="#285283" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M11.0832 3.5V11.6667C11.0832 11.9761 10.9603 12.2728 10.7415 12.4916C10.5227 12.7104 10.2259 12.8333 9.9165 12.8333H4.08317C3.77375 12.8333 3.47701 12.7104 3.25821 12.4916C3.03942 12.2728 2.9165 11.9761 2.9165 11.6667V3.5" stroke="#285283" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M1.75 3.5H12.25" stroke="#285283" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M4.6665 3.49996V2.33329C4.6665 2.02387 4.78942 1.72713 5.00821 1.50833C5.22701 1.28954 5.52375 1.16663 5.83317 1.16663H8.1665C8.47592 1.16663 8.77267 1.28954 8.99146 1.50833C9.21025 1.72713 9.33317 2.02387 9.33317 2.33329V3.49996" stroke="#285283" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>

                        {% if tab_name != "models" %}
                        <button class="cabinet-btn cabinet-btn-icon" type="button" title="{% trans 'RB copy diff' %}" modal-diff>
                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.0801 6.09586L12.2501 3.92584L10.0801 1.75586" stroke="#134473" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M1.75 3.92578H12.25" stroke="#134473" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M3.91998 7.90417L1.75 10.0742L3.91998 12.2442" stroke="#134473" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M12.25 10.0742H1.75" stroke="#134473" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% empty %}
                <p class="backup__list_empty">{% trans "RB No Copies Available" %}</p>
            {% endfor %}
    </div>

    {% if data.items and data.items|length > 5 %}
    <div>
        <button class="cabinet-btn" type="button" show-hidden>{% trans "RB Show all button" %}</button>
    </div>
    {% endif %}
    {% endwith %}
</div>