<%- include('partials/header', { title: 'Basics' }) %>

<!-- Page Header -->

<div class="row mb-3">
    <div class="col-12">
        <h1>Basics</h1>
    </div>
</div>

<!-- Steps -->

<div class="row mb-3">
    <div class="col-12">
        <div class="alert alert-info" role="alert">
            <b>Steps:</b>
            <ol>
                <li>
                    Log network requests that match a certain URL.
                    <ul>
                        <li>Add a <b>Request - Basic URL Match</b> rule.</li>
                        <li>Set the dropdown to <i>Contains</i> and the URL to <i>localhost:3000/basics/echo</i></li>
                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                    </ul>
                </li>
                <li>
                    Modify a request body on the fly.
                    <ul>
                        <li>Add a <b>Request - Modify Body</b> rule.</li>
                        <li>Set <b>Find</b> to <i>Mike</i>.</li>
                        <li>Set <b>Replace</b> to <i>Tom</i>.</li>
                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                    </ul>
                </li>
                <li>
                    Modify a response body on the fly.
                    <ul>
                        <li>Add a <b>Response - Modify Body</b> rule.</li>
                        <li>Set <b>Find</b> to <i>Tom</i>.</li>
                        <li>Set <b>Replace</b> to <i>Sally</i>.</li>
                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                    </ul>
                </li>
                <li>
                    Remove a response header.
                    <ul>
                        <li>Add a <b>Response - Remove Header</b> rule.</li>
                        <li>Set the header name to <i>x-powered-by</i>.</li>
                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                    </ul>
                </li>
            </ol>
            <div><a href="/basics/ruleset" class="btn btn-link">Download basics ruleset</a></div>
        </div>
    </div>
</div>

<!-- Main Content -->

<div class="row">
    <div class="col-12">
        <form>
            <div class="mb-3">
                <label for="name1" class="form-label">Enter your name</label>
                <input type="text" class="form-control" id="name1" aria-describedby="name1Help" />
            </div>
            <button type="button" class="btn btn-primary" onclick="echo()">Submit</button>
            <button type="button" class="btn btn-secondary" onclick="clearForm()">Clear</button>
        </form>
        <div class="mt-3">
            <span id="name1-output" class="fw-bold"></span>
        </div>
    </div>
</div>

<!-- Bottom Nav -->

<div class="row my-3">
    <div class="col-12 d-flex flex-column flex-sm-row justify-content-between gap-2">
        <a href="/" class="btn btn-link px-0">&lt; Home</a>
        <a href="/import-export" class="btn btn-link px-0 ms-sm-auto">Import / Export &gt;</a>
    </div>
</div>

<!-- Scripts -->

<script>
    async function echo() {
        const name = $('#name1').val();
        const response = await fetch('/basics/echo', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name })
        });
        const data = await response.json();
        const output = $('#name1-output');
        output.text(data.message);
    }

    function clearForm() {
        $('#name1').val('');
        const output = $('#name1-output');
        output.text('');
    }

</script>

<%- include('partials/footer') %>
