{% extends 'base.html' %}
{% block content %}
<div class="media-player container mt-4">
    <div class="row">
        <div class="col-md-9">
            <video id="media-player" controls class="w-100 rounded-3" style="background: #000;">
                <source src="" type="video/mp4">
                Your browser does not support HTML5 video.
            </video>
            
            <div class="torrent-controls mt-3">
                <button class="btn btn-sm btn-outline-secondary" id="play-pause">
                    <i class="bi bi-play-fill"></i>
                </button>
                <input type="range" class="form-range" id="seek-slider" value="0">
                <span class="timecode ms-3" id="timecode">00:00</span>
            </div>
        </div>
        
        <div class="col-md-3 torrent-info">
            <h5>Download Status</h5>
            <div class="progress">
                <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%">0%</div>
            </div>
            <ul class="list-group mt-3">
                <li class="list-group-item d-flex justify-content-between">
                    <span>Peers:</span>
                    <span class="peer-count">0</span>
                </li>
                <li class="list-group-item d-flex justify-content-between">
                    <span>Download Speed:</span>
                    <span class="download-speed">0 KB/s</span>
                </li>
                <li class="list-group-item d-flex justify-content-between">
                    <span>Upload Speed:</span>
                    <span class="upload-speed">0 KB/s</span>
                </li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}