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


<div class="report-container">
    <section class="basic-info-section">
        <div class="header-container">
          <span
            class="triangle-down-icon collapse-toggle"
            data-target="basic-info"
          ></span>
    
          <h2>{% trans 'Basic Information' %}</h2>
        </div>
    
        <div class="container-section collapsible-content" id="basic-info-content">
          <div class="item">
            <span class="item-label">{% trans 'Task name' %}</span>
            <span class="item-value">{{ execution.snapshot.name }}</span>
          </div>

          <div class="item">
            <span class="item-label">{% trans 'Date start' %}</span>
            <span class="item-value">{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
          </div>
    
          <div class="item">
            <span class="item-label">{% trans 'Date end' %}</span>
            <span class="item-value">{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
          </div>
    
          <div class="item">
            <span class="item-label">{% trans 'Assets amount' %}</span>
            <span class="item-value">{{ summary.total_assets | default:0 }}</span>
          </div>
    
          <div class="item">
            <span class="item-label">{% trans 'Asset success count' %}</span>
            <span class="item-value">{{ summary.ok_assets | default:0 }}</span>
          </div>
    
          <div class="item">
            <span class="item-label">{% trans 'Asset failed count' %}</span>
            <span class="item-value">{{ summary.fail_assets | default:0 }}</span>
          </div>
    
          <div class="item">
            <span class="item-label">{% trans 'Asset not support count' %}</span>
            <span class="item-value">{{ summary.error_assets | default:0 }}</span>
          </div>

          <div class="item">
            <span class="item-label">{% trans 'Time using' %}</span>
            <span class="item-value">{{ execution.duration }}s</span>
          </div>
        </div>
    </section>

    <section class="success">
        <div class="header-container">
            <span
              class="triangle-down-icon collapse-toggle"
              data-target="success"
            ></span>
      
            <h2>
                {% trans 'Success accounts' %}:
      
              <span> {{ summary.ok_accounts | default:0 }} </span>
            </h2>
        </div>

        <div class="container-section collapsible-content" id="success-content">
            {% if summary.ok_accounts %}
            <table class="custom-table table-striped table-hover data-table">
                <thead>
                <tr>
                    <th>{% trans 'No' %}</th>
                    <th>{% trans 'Asset' %}</th>
                    <th>{% trans 'Username' %}</th>
                </tr>
                </thead>
                <tbody>
                {% for account in result.ok_accounts %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ account.asset }}</td>
                        <td>{{ account.username }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
                <p class="no-data">{% trans 'No new accounts found' %}</p>
            {% endif %}
        </div>
    </section>

    <section class="failed">
        <div class="header-container">
            <span
              class="triangle-down-icon collapse-toggle"
              data-target="failed"
            ></span>
      
            <h2>
                {% trans 'Failed accounts' %}:
      
              <span> {{ summary.fail_accounts | default:0 }} </span>
            </h2>
        </div>

        <div class="container-section collapsible-content" id="failed-content">
            {% if summary.fail_accounts %}
            <table class="custom-table table-hover data-table">
                <thead>
                <tr>
                    <th>{% trans 'No' %}</th>
                    <th>{% trans 'Asset' %}</th>
                    <th>{% trans 'Username' %}</th>
                </tr>
                </thead>
                <tbody>
                {% for account in result.fail_accounts %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ account.asset }}</td>
                        <td>{{ account.username }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
                <p class="no-data">{% trans 'No new accounts found' %}</p>
            {% endif %}
        </div>
    </section>
</div>

<script>
  const toggleButtons = document.querySelectorAll('.collapse-toggle')

  toggleButtons.forEach((button) => {
    button.addEventListener('click', function () {
      const targetId = this.getAttribute('data-target')
      const targetContent = document.getElementById(`${targetId}-content`)

      if (this.classList.contains('triangle-down-icon')) {
        this.classList.remove('triangle-down-icon')
        this.classList.add('triangle-right-icon')
        targetContent.classList.add('collapsed')
      } else {
        this.classList.remove('triangle-right-icon')
        this.classList.add('triangle-down-icon')
        targetContent.classList.remove('collapsed')
      }
    })
  })
</script>

<style>
    html {
        font-size: 10px;
    }

    body,
    p {
        margin: 0;
        padding: 0;
    }

    .report-container {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
    }

    .basic-info-section,
    .success,
    .failed {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 16px 20px;
        margin: 0 20px;
        border: 1px solid #dee0e3;
        border-radius: 6px;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
    }

    .header-container {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 32px;
        margin-bottom: 12px;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 8px;
    }

    .header-container h2 {
        color: #1f2329;
        font: 500 16px/24px 'PingFang SC';
        margin: 0;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .header-container h2 span {
        display: inline-flex;
        margin-left: 8px;
        font-weight: normal;
    }

    .triangle-right-icon {
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 8px solid #1f2329;
        margin-right: 10px;
        cursor: pointer;
    }

    .triangle-down-icon {
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 8px solid #1f2329;
        margin-right: 10px;
        cursor: pointer;
    }

    .container-section {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        row-gap: 16px;
        column-gap: 10px;
    }

    .collapsible-content {
        overflow: auto;
        max-height: 1000px;
        opacity: 1;
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    .collapsible-content.collapsed {
        max-height: 0;
        opacity: 0;
        margin: 0;
        padding: 0;
    }

    .container-section .item {
        display: flex;
        flex-basis: calc(33.33% - 10px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 4px;
        padding: 4px 0;
    }

    .container-section .item .item-label {
        color: #646a73;
        font: 400 14px/22px 'PingFang SC';
    }

    .container-section .item .item-value {
        color: #1f2329;
        font: 500 14px/22px 'PingFang SC';
    }


    .custom-table {
        margin-bottom: 0;
        width: 100%;
        border-collapse: collapse;
        overflow: hidden;
    }

    .custom-table th {
        background-color: #f5f7fa;
        color: #646A73;
        font: 500 14px/22px 'PingFang SC';
        text-align: left;
        padding: 12px 8px;
        border-bottom: 1px solid #ebeef5;
    }

    .custom-table td {
        color: #1F2329;
        font: 400 14px/22px 'PingFang SC';
        padding: 12px 8px;
        border-bottom: 1px solid #ebeef5;
    }

    .custom-table tr:nth-child(even) {
        background-color: #f6f6f6;
    }

    .custom-table tr:last-child td {
        border-bottom: none;
    }

    .no-data {
        color: #909399;
        font: 400 14px/22px 'PingFang SC';
        text-align: center;
        padding: 20px;
        font-style: italic;
        background-color: #f9f9f9;
        border-radius: 4px;
        margin: 10px 0;
        width: 100%;
    }

    .new-accounts .section-header span {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .lost-accounts .section-header span {
        background: #fbe9e7;
        color: #d84315;
    }
    </style>