{% extends "base.html" %}
{% block content %}
    <div class="appheader">
        <h1 class="text-center mb-4" id="apptitle">{{title}}<br>📡</h1>
        Current User Agent: {{useragent}}
    </div>
    <form method="POST" class="mb-5" style="margin-top: 5px;">
        <div class="mb-3">
            <label for="url" class="form-label">Enter URL:</label>
            <input type="text" name="url" id="url" class="form-control" placeholder="https://example.com" required>
        </div>
        <div class="mb-3">
            <label for="saved-url" class="form-label">Saved URLs:</label>
            <select name="saved-url" id="saved-url" class="form-select" onchange="document.getElementById('url').value = this.value;">
                <option value="" selected>Select Saved URL...</option>
                {% for url in saved_urls %}
                    <option value="{{ url[1] }}">{{ url[1] }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="mb-3">
            <label for="useragent" class="form-label">Select User Agent:</label>
            <select name="useragent" id="useragent" class="form-select">
                    <option value="Web Browsers">[ Web Browsers ]</option>
                {% for agent in user_agents %}
                    <option value="{{ agent }}" {% if agent == useragent %}selected{% endif %}>{{ agent }}</option>
                {% endfor %}
            </select>
        </div>
        <button type="submit" class="btn btn-primary">Save & Analyze URL</button>&nbsp;&nbsp;
        <a href="/scrape" class="btn btn-primary">Scrape Saved URL</a>&nbsp;&nbsp;
        <a href="/edit" class="btn btn-primary">Edit URLs</a>&nbsp;&nbsp;
        <a href="/" class="btn btn-primary">Reset All</a>
    </form>
{% if results %}
    {% if results.error %}
        <div class="alert alert-danger">{{ results.error }}</div>
    {% else %}
       <div class="result">
        <h2>Results for {{ results.url }}</h2>
        <p><strong>Page Load Time:</strong> {{ results.load_time }}</p>
       </div>
       <div class="result">        
        <h3>Page Title</h3>
        <p>{{ results.page_title }}</p>
       </div>
        <div class="result" onclick="toggleVisibility('headers')">
            <h3>Headers &#9660;</h3>
            <div id="headers" class="result-content">
        <pre>{{ results.headers | tojson(indent=2) }}</pre>
            </div>
        </div>
        <div class="result" onclick="toggleVisibility('metaTags')">
            <h3>Meta Tags &#9660;</h3>
            <div id="metaTags" class="result-content">
                <pre>{{ results.meta_tags | tojson(indent=2) }}</pre>
            </div>
        </div>
        <div class="result" onclick="toggleVisibility('ogMetaTags')">
            <h3>Open Graph Meta Tags &#9660;</h3>
            <div id="ogMetaTags" class="result-content">
                <pre>{{ results.og_meta_tags | tojson(indent=2) }}</pre>
            </div>
        </div>       
       <div class="pagepreview">
        <h3>Page Preview</h3>
        {% if results.page_preview or results.page_title or results.page_description %}
        <div class="card" style="max-width: 540px;">
            {% if results.page_preview %}
            <img src="{{ results.page_preview }}" class="card-img-top" alt="Page Preview">
            {% endif %}
            <div class="card-body">
                <h5 class="card-title">{{ results.page_title }}</h5>
                <p class="card-text">{{ results.page_description }}</p>
                <a href="{{ results.url }}" class="btn btn-primary" target="_blank">Visit Page</a>
            </div>
        </div>
       </div>
        {% else %}
        <p>No preview data available.</p>
        {% endif %}
       <div class="codebox"> 
        <h3>Copy & Paste HTML Code</h3>
        <div class="mb-3">
            <textarea id="previewHtml" class="form-control" rows="10" readonly>{{ results.preview_html }}</textarea>
        </div>
        <button id="copyButton" class="btn btn-success">Copy HTML Preview Code</button>
        <div id="copyAlert" class="alert alert-success mt-3 d-none" role="alert">
            Code copied to clipboard!
        </div>
       
    {% endif %}
{% endif %}
{% endblock %}