{% extends "base.jinja2" %}

{% block content %}
    <div class="row mb-3">
        <div class="col text-center">
            <img class="img-fluid" src="/images/home/home_logo.png" alt="New Horizons Logo"/>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <h1>Welcome!</h1>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p>This is the official documentation for <a target="_blank" rel="noopener" href="https://github.com/xen-42/outer-wilds-new-horizons">New Horizons</a></p>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <h2>Getting Started</h2>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p>There is a template <a href="https://github.com/xen-42/ow-new-horizons-config-template" rel="noopener" target="_blank">here</a> if you want to release your own planet mod using configs. You can learn how the configs work by picking apart the <a href="https://github.com/xen-42/outer-wilds-real-solar-system" rel="noopener" target="_blank">Real Solar System</a> mod or the <a href="https://github.com/xen-42/ow-new-horizons-examples" rel="noopener" target="_blank">New Horizons Examples mod</a>.</p>
            <p>Planets are created using a JSON file format structure, and placed in a folder called planets (or in any sub-directory of it) in the location where New Horizons is installed (by default this folder doesn't exist, you have to create it within the xen.NewHorizons directory).</p>       
            <p>To locate this directory, click the "⋮" symbol next to "New Horizons" in the Outer Wilds Mod Manager and then click "show in explorer" in the pop-up.</p>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <figure class="figure">
                <img src="/images/home/mod_manager_dots.png" class="figure-img img-fluid rounded" alt="Click the three dots in the mod manager">
                <figcaption class="figure-caption text-end">Click the ⋮</figcaption>
            </figure>
        </div>
        <div class="col">
            <figure class="figure">
                <img src="/images/home/create_planets.png" class="figure-img img-fluid rounded" alt="Create a new folder named &quot;planets&quot;">
                <figcaption class="figure-caption text-end">Create a new folder named "planets"</figcaption>
            </figure>
        </div>
    </div>
{% endblock %}