{extends file="layout.tpl"}

{block name="content"}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="mb-1">Sklonuj playlistę</h4>
                    <p class="text-muted mb-0">Skopiuj playlistę do innego urządzenia</p>
                </div>
                <a href="{$baseUrl}/playlists?device_id={$playlist.device_id}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i>Powrót
                </a>
            </div>

            <!-- Info o źródłowej playliście -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        {if $playlist.type == 'xtream'}
                        <i class="bi bi-broadcast text-primary me-2"></i>
                        {elseif $playlist.type == 'm3u'}
                        <i class="bi bi-link-45deg text-success me-2"></i>
                        {else}
                        <i class="bi bi-hdd-network text-warning me-2"></i>
                        {/if}
                        Playlista źródłowa
                    </h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm mb-0">
                        <tr>
                            <th class="text-muted" style="width: 35%">Nazwa:</th>
                            <td><strong>{$playlist.name}</strong></td>
                        </tr>
                        <tr>
                            <th class="text-muted">Typ:</th>
                            <td>
                                <span class="badge {if $playlist.type == 'xtream'}bg-primary{elseif $playlist.type == 'm3u'}bg-success{else}bg-warning{/if}">
                                    {$playlist.type|upper}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <th class="text-muted">Urządzenie:</th>
                            <td>{$playlist.device_name|default:$playlist.mac}</td>
                        </tr>
                        {if $playlist.type == 'xtream'}
                        <tr>
                            <th class="text-muted">Host:</th>
                            <td><code>{$config.host}</code></td>
                        </tr>
                        <tr>
                            <th class="text-muted">User:</th>
                            <td><code>{$config.username}</code></td>
                        </tr>
                        {elseif $playlist.type == 'm3u'}
                        <tr>
                            <th class="text-muted">URL:</th>
                            <td><code class="small">{$config.url|truncate:50}</code></td>
                        </tr>
                        {else}
                        <tr>
                            <th class="text-muted">Server:</th>
                            <td><code>{$config.server_url|truncate:40}</code></td>
                        </tr>
                        <tr>
                            <th class="text-muted">MAC:</th>
                            <td><code>{$config.mac_address}</code></td>
                        </tr>
                        {/if}
                    </table>
                </div>
            </div>

            <!-- Formularz wyboru urządzenia docelowego -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="bi bi-arrow-right-circle me-2"></i>Urządzenie docelowe</h6>
                </div>
                <div class="card-body">
                    {if $error|default:false}
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-circle me-2"></i>{$error}
                    </div>
                    {/if}

                    <form method="post" action="{$baseUrl}/playlists/clone?id={$playlist.id}">
                        <input type="hidden" name="csrf_token" value="{$csrfToken}">

                        <div class="mb-4">
                            <label class="form-label">Wybierz urządzenie <span class="text-danger">*</span></label>
                            <select name="device_id" class="form-select" required>
                                <option value="">Wybierz urządzenie...</option>
                                {foreach $devices as $device}
                                {if $device.id != $playlist.device_id}
                                <option value="{$device.id}">
                                    {$device.name|default:$device.mac} 
                                    ({$device.mac})
                                    {if $isAdmin && $device.username} - {$device.username}{/if}
                                </option>
                                {/if}
                                {/foreach}
                            </select>
                            <small class="text-muted">Playlista zostanie skopiowana do wybranego urządzenia</small>
                        </div>

                        <div class="alert alert-info mb-4">
                            <i class="bi bi-info-circle me-2"></i>
                            Jeśli na urządzeniu docelowym istnieje już playlista o tej samej nazwie, zostanie automatycznie dodana numeracja.
                            Jeśli istnieje playlista z identycznymi danymi (URL/host), klonowanie nie będzie możliwe.
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="bi bi-copy me-2"></i>Sklonuj playlistę
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
