<!-- RAID 模式选择 -->
<div class="raid-mode-select">
    <label class="raid-label">选择 RAID 模式</label>
    <div class="raid-modes">
        <template x-for="mode in raidModes" :key="mode.id">
            <button 
                class="raid-mode-btn"
                :class="selectedMode === mode.id ? 'active' : ''"
                @click="selectMode(mode.id)"
                :title="mode.desc"
            >
                <span class="mode-name" x-text="mode.name"></span>
                <span class="mode-desc" x-text="mode.desc"></span>
            </button>
        </template>
    </div>
</div>

<!-- 硬盘配置 -->
<div class="raid-config">
    <div class="config-row">
        <div class="config-item">
            <label class="raid-label">硬盘数量</label>
            <input type="number" x-model="diskCount" min="2" max="24" class="raid-input" @input="calculate()">
        </div>
        <div class="config-item">
            <label class="raid-label">单盘容量 (TB)</label>
            <input type="number" x-model="diskSize" min="1" max="100" step="0.5" class="raid-input" @input="calculate()">
        </div>
    </div>
</div>

<!-- 计算结果 -->
<div class="raid-result" x-show="diskCount >= 2">
    <div class="result-grid">
        <div class="result-card">
            <div class="result-icon">💽</div>
            <div class="result-label">可用容量</div>
            <div class="result-value" x-text="result.usableCapacity"></div>
            <div class="result-sub" x-text="'原始容量: ' + result.rawCapacity + ' TB'"></div>
        </div>
        <div class="result-card">
            <div class="result-icon">🛡️</div>
            <div class="result-label">容错能力</div>
            <div class="result-value" 
                 :class="result.faultTolerance > 0 ? 'text-green' : 'text-red'"
                 x-text="result.faultTolerance + ' 块硬盘'"></div>
            <div class="result-sub" x-text="result.faultTolerance > 0 ? '可同时故障数量' : '无容错'"></div>
        </div>
        <div class="result-card">
            <div class="result-icon">📊</div>
            <div class="result-label">存储效率</div>
            <div class="result-value" x-text="result.efficiency + '%'"></div>
            <div class="result-sub" x-text="result.waste + ' TB 冗余'"></div>
        </div>
    </div>
</div>

<!-- 警告提示 -->
<div class="raid-warning" x-show="warning" x-text="warning" style="display: none;"></div>

<!-- RAID 模式说明 -->
<div class="raid-info">
    <h3>📋 RAID 模式对比</h3>
    <table class="raid-table">
        <thead>
            <tr>
                <th>模式</th>
                <th>最小盘数</th>
                <th>容错</th>
                <th>效率</th>
                <th>特点</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><strong>RAID 0</strong></td>
                <td>2</td>
                <td>❌ 无</td>
                <td>100%</td>
                <td>性能最佳，无容错</td>
            </tr>
            <tr>
                <td><strong>RAID 1</strong></td>
                <td>2</td>
                <td>✅ N-1</td>
                <td>50%</td>
                <td>镜像备份，安全性高</td>
            </tr>
            <tr>
                <td><strong>RAID 5</strong></td>
                <td>3</td>
                <td>✅ 1</td>
                <td>67%-94%</td>
                <td>平衡性能与安全</td>
            </tr>
            <tr>
                <td><strong>RAID 6</strong></td>
                <td>4</td>
                <td>✅ 2</td>
                <td>50%-92%</td>
                <td>双重校验，极端安全</td>
            </tr>
            <tr>
                <td><strong>RAID 10</strong></td>
                <td>4</td>
                <td>✅ 1/2</td>
                <td>50%</td>
                <td>镜像+条带，性能安全兼顾</td>
            </tr>
        </tbody>
    </table>
</div>