{% extends "layout_study.html" %}

{% block content %}
    <h2>Study List</h2>
    <table border="1">
        <thead>
            <tr>
                <th>Study Name</th>
                <th>Sponsor Name</th>
                <th>Description</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for row in datas %}
            <tr>
                <td>{{ row['STUDYNAME'] }}</td>
                <td>{{ row['SPONSERNAME'] }}</td>
                <td>{{ row['STUDYDESCRIPTION'] }}</td>
                <td>
                    <a href="{{ url_for('edit_user', uid=row['UID']) }}">Edit</a>
                    <a href="{{ url_for('delete_study', uid=row['UID']) }}" onclick="return confirm('Are you sure you want to delete this study?');">Delete</a>
                </td>
            </tr>
            <style>
            body {
               background-color: #f0f8ff; 
               color: #333; 
               font-family: 'Arial', sans-serif;
               margin: 0;
               padding: 0;
           }
           
           .container {
               width: 80%;
               margin: 0 auto;
               padding: 20px;
               background-color: #ffffff; 
               box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
               border-radius: 8px;
           }
           
           h1, h2, h3 {
               color: #4a90e2; 
           }
           
           h1 {
               font-size: 2.5em;
           }
           
           h2 {
               font-size: 2em;
           }
           
           h3 {
               font-size: 1.5em;
           }
           
           table {
               width: 100%;
               border-collapse: collapse;
               margin-bottom: 20px;
           }
           
           th, td {
               border: 1px solid #ddd; 
               padding: 12px;
               text-align: left;
           }
           
           th {
               background-color: #4a90e2; 
               color: #fff; 
           }
           
           tr:nth-child(even) {
               background-color: #f9f9f9; 
           }
           
           tr:hover {
               background-color: #f1c40f; 
           }
           
           a {
               color: #4a90e2; 
               text-decoration: none;
           }
           
           a:hover {
               text-decoration: underline;
           }
           
           /* Button Styles */
           button, .btn {
               background-color: #4a90e2; 
               color: #fff;
               border: none;
               padding: 10px 20px;
               font-size: 16px;
               cursor: pointer;
               border-radius: 5px;
               transition: background-color 0.3s;
           }
           
           button:hover, .btn:hover {
               background-color: #357ABD; 
           }
           
           .alert {
               padding: 15px;
               margin: 10px 0;
               border-radius: 5px;
               font-size: 16px;
           }
           
           .alert-success {
               color: #155724;
               background-color: #d4edda;
               border-color: #c3e6cb;
           }
           
           .alert-warning {
               color: #856404;
               background-color: #fff3cd;
               border-color: #ffeeba;
           }
           
           .alert-danger {
               color: #721c24;
               background-color: #f8d7da;
               border-color: #f5c6cb;
           }
           </style>
           
            {% endfor %}
        </tbody>
    </table>

    <a href="{{ url_for('add_study') }}">Add New Study</a>
{% endblock %}