{% extends "base.html" %}
{% load static %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="main-content-header">
  <a href="{% url 'dashboard' %}" class="back-link">&larr; Back to Overview</a>
  <h1>{{ business.business_name }}</h1>
</div>

<div class="card-grid">
  <div class="card">
    <div class="card-header">
      <h3>Services</h3>
    </div>
    <div class="card-body">
      <ul class="list-group">
        {% for service in services %}
          <li class="list-group-item">{{ service.name }} - {{ service.duration }} mins at ${{ service.price }}</li>
        {% empty %}
          <li class="list-group-item">No services found.</li>
        {% endfor %}
      </ul>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h3>Recent Calls</h3>
    </div>
    <div class="card-body">
      <ul class="list-group">
        {% for call in calls %}
          <li class="list-group-item">Call from {{ call.contact }} on {{ call.start_time|date:"Y-m-d H:i" }}</li>
        {% empty %}
          <li class="list-group-item">No calls found.</li>
        {% endfor %}
      </ul>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h3>Recent Bookings</h3>
    </div>
    <div class="card-body">
      <ul class="list-group">
        {% for booking in bookings %}
          <li class="list-group-item">{{ booking.service.name }} for {{ booking.contact }} on {{ booking.start_time|date:"Y-m-d H:i" }}</li>
        {% empty %}
          <li class="list-group-item">No bookings found.</li>
        {% endfor %}
      </ul>
    </div>
  </div>
</div>
{% endblock %}
