{% extends "base.html" %}
{% block content %}
<div class="container mt-4">
    <h2>Dashboard</h2>

    <div class="row mt-4">
        <div class="col-md-4">
            <a href="{{ url_for('properties.index') }}" class="card text-center p-4 shadow-sm">
                <h4>My Properties</h4>
            </a>
        </div>

        <div class="col-md-4">
            <a href="{{ url_for('main.about') }}" class="card text-center p-4 shadow-sm">
                <h4>About</h4>
            </a>
        </div>

        <div class="col-md-4">
            <a href="{{ url_for('auth.logout') }}" class="card text-center p-4 shadow-sm text-danger">
                <h4>Logout</h4>
            </a>
        </div>
    </div>
</div>
{% endblock %}


    <!-- Dashboard Content -->
    <div class="col-md-9">
      <h3>Welcome to your dashboard</h3>
      <p class="text-muted">Quick actions and recent activity</p>

      <div class="row">

        <!-- Card: Add Property -->
        <div class="col-md-4 mb-3">
          <div class="card shadow-sm">
            <div class="card-body text-center">
              <h5 class="card-title">New Property</h5>
              <a href="{{ url_for('properties.new') }}" class="btn btn-primary btn-sm">Add Property</a>
            </div>
          </div>
        </div>

        <!-- Card: View Properties -->
        <div class="col-md-4 mb-3">
          <div class="card shadow-sm">
            <div class="card-body text-center">
              <h5 class="card-title">All Properties</h5>
              <a href="{{ url_for('properties.index') }}" class="btn btn-outline-primary btn-sm">View</a>
            </div>
          </div>
        </div>

        <!-- Card: Reports -->
        <div class="col-md-4 mb-3">
          <div class="card shadow-sm">
            <div class="card-body text-center">
              <h5 class="card-title">Reports</h5>
              <a href="{{ url_for('reports.index') }}" class="btn btn-outline-primary btn-sm">Open Reports</a>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>
</div>
{% endblock %}