<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Configuration - Stremio Addon</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <link href="/static/css/styles.css" rel="stylesheet">

</head>

<body>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8 col-sm-10 config-container">
            <img class="logo" src="/static/images/mediafusion_logo.png">
            <h3 class="text-center mb-5">MediaFusion Addon Configuration</h3>

            <!-- Configuration Form -->
            <form id="configForm">
                <!-- Streaming Provider -->
                <div class="mb-3">
                    <h4>Select Stream Provider</h4>
                    <label for="provider_service">Streaming Provider:</label>
                    <select class="form-control" name="provider_service" id="provider_service" onchange="updateProviderFields(true)">
                        <option value="" {% if not user_data.streaming_provider.service %}selected{% endif %}>Direct Torrent (Free)</option>
                        <option value="pikpak" {% if user_data.streaming_provider.service=='pikpak' %}selected{% endif %}>PikPak (Free Quota)</option>
                        <option value="seedr" {% if user_data.streaming_provider.service=='seedr' %}selected{% endif %}>Seedr.cc (Free Quota)</option>
                        <option value="offcloud" {% if user_data.streaming_provider.service=='offcloud' %}selected{% endif %}>OffCloud (Free Quota)</option>
                        <option value="torbox" {% if user_data.streaming_provider.service=='torbox' %}selected{% endif %}>Torbox (Free Quota)</option>
                        <option value="realdebrid" {% if user_data.streaming_provider.service=='realdebrid' %}selected{% endif %}>Real-Debrid (Premium)</option>
                        <option value="debridlink" {% if user_data.streaming_provider.service=='debridlink' %}selected{% endif %}>Debrid-Link (Premium)</option>
                        <option value="alldebrid" {% if user_data.streaming_provider.service=='alldebrid' %}selected{% endif %}>AllDebrid (Premium)</option>
                    </select>
                </div>

                <!-- Affiliate Signup Links -->
                <div id="signup_section" style="display:none" class="mb-3">
                    <h5>Don't have an account?</h5>
                    <a id="signup_link" href="#" class="btn btn-primary" target="_blank">Create Account</a>
                </div>

                <!-- Credentials Input -->
                <div id="credentials" style="display:none">
                    <h5>Enter Credentials</h5>
                    <div class="mb-3">
                        <label for="username">Username:</label>
                        <input class="form-control" type="text" id="username" name="username" placeholder="Enter Username"
                               value="{{ user_data.streaming_provider.username if user_data.streaming_provider.username else '' }}">
                        <div class="invalid-feedback">
                            Username is required.
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="password">Password:</label>
                        <div class="input-group">
                            <input class="form-control" type="password" id="password" name="password" placeholder="Enter Password">
                            <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                <span id="togglePasswordIcon" class="bi bi-eye"></span>
                            </button>
                            <div class="invalid-feedback">
                                Password is required.
                            </div>
                        </div>
                    </div>
                </div>

                <!-- OAuth Section -->
                <div id="oauth_section" class="mb-3" style="display:none">
                    <h5>Authorize Addon (Recommended)</h5>
                    <button type="button" id="oauth_btn" class="btn">Authorize</button>
                    <div id="device_code_section" class="mt-2" style="display:none;">
                        To complete the authorization, follow these steps:
                        <ol>
                            <li>Visit the authorization link: <a id="verification_link" href="#" target="_blank">#</a></li>
                            <li>Enter the device code provided below into the authorization page.</li>
                        </ol>
                        Your device code: <strong><span id="device_code_display"></span></strong>
                    </div>
                </div>


                <!-- Token for Providers -->
                <div id="token_input" class="mb-3" style="display:none">
                    <label for="provider_token">Token:</label>
                    <input class="form-control" type="text" name="provider_token" id="provider_token" placeholder="Enter Token"
                           value="{{ user_data.streaming_provider.token if user_data.streaming_provider.token else '' }}">
                    <div class="invalid-feedback">
                        Token is required.
                    </div>
                </div>

                <div class="mb-3">
                    <h4>Select Catalogs:</h4>
                    <div class="row"> <!-- Added row class -->
                        {% for catalog in catalogs %}
                        <div class="col-12 col-md-6 col-lg-4"> <!-- Define widths for different screens -->
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="selected_catalogs" value="{{ catalog[0] }}" id="{{ catalog[0] }}" {% if catalog[0] in user_data.selected_catalogs
                                       %}checked{% endif %}>
                                <label class="form-check-label" for="{{ catalog[0] }}">
                                    {{ catalog[1] }}
                                </label>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <!-- Select Streaming Resolutions -->
                <div class="mb-3">
                    <h4>Select Streaming Resolutions:</h4>
                    <div class="row">
                        {% for resolution in resolutions %}
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="selected_resolutions"
                                       value="{{ resolution if resolution else '' }}"
                                       id="resolution_{{ resolution if resolution else 'unknown' }}"
                                       {% if resolution in user_data.selected_resolutions %}checked{% endif %}>
                                <label class="form-check-label" for="resolution_{{ resolution if resolution else 'unknown' }}">
                                    {{ resolution if resolution else 'Unknown' }}
                                </label>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <!-- Enable Provider Watchlist -->
                <div id="watchlist_section" style="display:none" class="mb-3">
                    <h4>Provider Watchlist Catalog:</h4>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="enable_watchlist"
                               id="enable_watchlist" {% if user_data.streaming_provider and user_data.streaming_provider.enable_watchlist_catalogs %}checked{% endif %}>
                        <label class="form-check-label" for="enable_watchlist" id="watchlist_label">
                            Enable Watchlist
                        </label>
                    </div>
                </div>

                <!-- Submit Button -->
                <button type="submit" class="mt-3 btn btn-block custom-btn mx-auto">
                    Install Addon
                </button>

            </form>
        </div>
    </div>
</div>

<!-- JS for Bootstrap and form validation -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
<script src="/static/js/config_script.js"></script>
</body>

</html>

