{% include 'header1.twig' %}

<div class="top-padding"></div>
<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">

      {% if error %}
        <div class="alert alert-dismissible alert-danger">
          <button type="button" class="close" data-dismiss="alert">×</button>
          {{ errorText }}
        </div>
      {% endif %}
      {% if success %}
        <div class="alert alert-dismissible alert-success">
          <button type="button" class="close" data-dismiss="alert">×</button>
          {{ successText }}
        </div>
      {% endif %}

      <div class="card mb-3">
        <div class="card-header">
          <div class="ticket-title">{{ messageList['ticket']['subject'] }}</div>
          {% if messageList["ticket"]["canmessage"] == 1 %}
            <span class="badge">This request has been closed by the administrator</span>
          {% endif %}
        </div>
        <div class="card-body">
          {% if messageList %}
            {% for message in messageList %}
              {% if message["support"] == 1 %}
                <div class="row ticket-message-block ticket-message-right">
                  <div class="col-md-1"></div>
                  <div class="col-md-11">
                    <div class="ticket-message">
                      <div class="message">{{ message["message"] }}</div>
                    </div>
                    <div class="info text-right">
                      <span style="font-size: 20px;">👤</span> <strong>{{ user["username"] }}</strong> <!-- User emoji -->
                      <small class="text-muted">{{ message["time"] }}</small>
                    </div>
                  </div>
                  <div class="col-md-1"></div>
                </div>
              {% elseif message["subject"] %}
              {% else %}
                <div class="row ticket-message-block ticket-message-left">
                  <div class="col-md-11">
                    <div class="ticket-message">
                      <div class="message">{{ message["message"] }}</div>
                    </div>
                    <div class="info">
                      <span style="font-size: 20px;">🧑‍💻</span> <strong>Support Team</strong> <!-- New support emoji -->
                      <small class="text-muted">{{ message["time"] }}</small>
                    </div>
                  </div>
                  <div class="col-md-1"></div>
                </div>
              {% endif %}
            {% endfor %}
          {% endif %}
        </div>
      </div>
{% include 'footer.twig' %}

<style>

/* Card Styling */
.card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.card-header {
  background-color: #f1f1f1;
  padding: 15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.card-body {
  padding: 20px;
}

/* Ticket Title */
.ticket-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Message Container */
.ticket-message-block {
  margin-bottom: 15px;
}

/* User's (right) messages */
.ticket-message-right {
  text-align: right;
}

.ticket-message-right .ticket-message {
  background-color: #dcf8c6; /* Light green for user messages */
  border-radius: 10px;
  padding: 10px;
  max-width: 70%;
  display: inline-block;
  word-wrap: break-word;
}

.ticket-message-right .info {
  text-align: right;
  margin-bottom: 10px; /* Added gap between name and message */
}

.ticket-message-right .info strong {
  color: #128C7E; /* WhatsApp green color */
}

/* Support Team (left) messages */
.ticket-message-left {
  text-align: left;
}

.ticket-message-left .ticket-message {
  background-color: #f7f7f7; /* Light gray for support messages */
  border-radius: 10px;
  padding: 10px;
  max-width: 70%;
  display: inline-block;
  word-wrap: break-word;
}

.ticket-message-left .info {
  text-align: left;
  margin-bottom: 10px; /* Added gap between name and message */
}

.ticket-message-left .info strong {
  color: #25D366; /* WhatsApp green color for support */
}

/* Message Form */
textarea.form-control {
  border-radius: 15px;
  border: 1px solid #dcdcdc;
  padding: 10px;
}

button.btn-primary {
  background-color: #25D366; /* WhatsApp green color */
  border-color: #25D366;
  border-radius: 20px;
  padding: 10px 20px;
}

button.btn-primary:hover {
  background-color: #128C7E; /* Darker green on hover */
  border-color: #128C7E;
}
</style>