pages/30_Medical_Architectures.py

import streamlit as st
import json

# Set page configuration to wide screen
st.set_page_config(layout="wide")

# Load the data from the external JSON file
with open('data.json', 'r') as file:
    data = json.load(file)

# Set up session state to keep track of the current index
if 'current_index' not in st.session_state:
    st.session_state.current_index = 0

# Function to display the current article
def display_article(index):
    article = data['articles'][index]

    # Display the title and description
    st.markdown(f"<h2 style='text-align: center;'>{article['title']}</h2>", unsafe_allow_html=True)
    st.write(article['description'])

    # Display the image centered
    st.image(article['image'], caption=article['title'])

    # Display the link
    st.markdown(f"<div style='text-align: center;'><a href='{article['href']}' target='_blank'>Read more</a></div>", unsafe_allow_html=True)

# Function to handle navigation via buttons
def next_article():
    if st.session_state.current_index < len(data['articles']) - 1:
        st.session_state.current_index += 1

def previous_article():
    if st.session_state.current_index > 0:
        st.session_state.current_index -= 1

# Dropdown to select an article by title
options = [article['title'] for article in data['articles']]
selected_title = st.selectbox("Select an Architecture", options, index=st.session_state.current_index)

# Add the Medical Architect Assistant link directly below the dropdown
st.markdown(
    """
    <div style='text-align: center;'>
        <a href='https://chatgpt.com/g/g-UexWaSEjO-medical-cloud-architect' target='_blank' style='font-size: 20px; color: #2C6BA0;'>
            Medical Cloud Architect Assistant
        </a>
    </div>
    """,
    unsafe_allow_html=True
)

# Find the selected article index based on the title
for i, article in enumerate(data['articles']):
    if article['title'] == selected_title:
        st.session_state.current_index = i
        break

# Display the current article
display_article(st.session_state.current_index)

# Add navigation buttons
col1, col2, col3 = st.columns([1, 1, 1])
with col1:
    st.button("Previous", on_click=previous_article)
with col3:
    st.button("Next", on_click=next_article)

# Show the current index out of total articles
st.write(f"Article {st.session_state.current_index + 1} of {len(data['articles'])}")

# Make the app fullscreen-friendly and wide screen
st.markdown(
    """
    <style>
        .main {
            max-width: 100%;
            padding-left: 10px;
            padding-right: 10px;
        }
        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            max-width: 80%;
        }
        h2 {
            text-align: center;
        }
    </style>
    """,
    unsafe_allow_html=True
)