Untitled
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Products Overview</title> <style> body { font-family: Arial, sans-serif; margin: 20px; color: #333; background-color: #f9f9f9; } table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #4CAF50; color: white; } tr:nth-child(even) { background-color: #f2f2f2; } .nested-table { margin: 10px 0; } .nested-table th { background-color: #007BFF; color: white; } </style> </head> <body> <h1>Products Overview</h1> <table> <thead> <tr> <th>Product</th> <th>Status</th> <th>Special Status</th> </tr> </thead> <tbody> {% for product, details in data.items() %} <tr> <td>{{ product }}</td> <td> {% for status, value in details.items() if status != 'special_status1' %} <strong>{{ status }}</strong>: {{ value }}<br> {% endfor %} </td> <td> {% if 'special_status1' in details %} <table class="nested-table"> <thead> <tr> <th>Type</th> <th>Status Code</th> <th>Text</th> <th>Created At</th> </tr> </thead> <tbody> {% for status_type, status_data in details.special_status1.items() %} <tr> <td>{{ status_type }}</td> <td>{{ status_data.status_code }}</td> <td>{{ status_data.text }}</td> <td>{{ status_data.created_at }}</td> </tr> {% endfor %} </tbody> </table> {% else %} No special status {% endif %} </td> </tr> {% endfor %} </tbody> </table> </body> </html>
Leave a Comment