{% extends "layout.html" %}

{% block title %}OptiWarm - Home{% endblock %}

{% block content %}
<div class="jumbotron">
    <h1 class="display-4">Welcome to OptiWarm</h1>
    <p class="lead">Optimization of space heating cost</p>
    <hr class="my-4">
    <p>OptiWarm helps you manage and optimize your heating systems for maximum efficiency and cost savings.</p>
    <a class="btn btn-primary btn-lg mr-3" href="{{ url_for('main.office') }}" role="button">
        <i class="fas fa-building mr-2"></i>Offices
    </a>
    <a class="btn btn-primary btn-lg mr-3" href="{{ url_for('main.dashboard') }}" role="button">
        <i class="fas fa-tachometer-alt mr-2"></i>View Dashboard
    </a>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">
                    <i class="fas fa-map-marker-alt mr-2"></i>Locations
                </h5>
                <p class="card-text">Manage your physical locations where heating systems are installed.</p>
                <a href="{{ url_for('locations.index') }}" class="btn btn-primary">Manage Locations</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">
                    <i class="fas fa-layer-group mr-2"></i>Zones
                </h5>
                <p class="card-text">Configure heating zones within your locations for precise temperature control.</p>
                <a href="{{ url_for('zones.index') }}" class="btn btn-primary">Manage Zones</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">
                    <i class="fas fa-th-large mr-2"></i>Place Types
                </h5>
                <p class="card-text">Define different types of places with specific heating requirements.</p>
                <a href="{{ url_for('placetypes.place_types') }}" class="btn btn-primary">Manage Place Types</a>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card bg-light">
            <div class="card-body">
                <h5 class="card-title">Getting Started</h5>
                <p class="card-text">Follow these steps to set up your heating optimization system:</p>
                <ol>
                    <li>Create one or more locations (buildings, offices, etc.)</li>
                    <li>Set up place types for different areas (living spaces, working areas, etc.)</li>
                    <li>Define zones within each location with appropriate place types</li>
                    <li>Add insulation data to each zone for accurate heat loss calculations</li>
                    <li>Monitor and optimize your heating costs on the dashboard</li>
                </ol>
            </div>
        </div>
    </div>
</div>
{% endblock %}