{% extends "components/main/base.html" %}
{% block content %}
<section class="hero is-medium is-info">
    <div class="hero-body">
        <p class="title">SWOT ANALYZER</p>
        <p class="subtitle">Strengths, Weaknesses, Opportunities and Threats
            breakdown, courtesy of Generative AI-driven insights.</p>
        <p>Try it out now!</p>
    </div>
</section>
<section class="section">
    <Spinner></Spinner>
    <div class="container">
        <h1 class="title">Search Here</h1>
        <Form form_id="swotSearch"
              action={{ url_for('analyze_url') }}
              target="status"
              method="post">
            <div class="field has-addons">
                <Search input_type='url'>
                    <div class="control">
                        <button type="submit"
                                class="button is-success"
                                hx-indicator='#spinner'
                                hx-on:click="
                        const [status, result] = ['#status', '#result'].map(id => document.querySelector(id));
                        status.style.display = 'block';
                        result.style.display = 'none';
                        ">Analyze</button>
                    </div>
                </Search>
        </Form>
    </div>
    </div>
</section>
<section class="section"
         id="analysis-content">
    <div class="box"
         id="status"
         hx-get={{ url_for('get_status') }}
         hx-trigger="load, every 1s"
         hx-swap="innerHTML"
         style="display: none">
    </div>
    <div class="box"
         id="result"
         hx-get={{ url_for('get_result') }}
         hx-trigger="load, every 1s[!this.querySelector('#result-container') || this.style.display === 'none']"
         hx-swap="innerHTML"
         hx-on:after-request="
            if(this.innerHTML.trim().length > 0) {
            console.log('Going to turn off the status element and load the result element.')
            const statusDiv = document.querySelector('#status');
            if (statusDiv) statusDiv.style.display = 'none';
            this.style.display = 'block'
            }
            ">
    </div>
</section>
{% endblock content %}