const epicSelect = document.getElementById('epicSelect');
const epicDetails = document.getElementById('epicDetails');
const epicRelatedTasks = document.getElementById('epicRelatedTasks');
const editEpicButton = document.getElementById('editEpicButton');
const createTaskButton = document.getElementById('createTaskButton');
const createStoryButton = document.getElementById('createStoryButton');

epicSelect.addEventListener('change', function () {
    if (this.value !== 'EPICS') {
        epicDetails.classList.remove('hidden');
        epicDetails.classList.add('flex');

        epicRelatedTasks.classList.remove('hidden');

        editEpicButton.classList.remove('cursor-not-allowed', 'opacity-30');
        editEpicButton.classList.add('cursor-pointer');
        editEpicButton.removeAttribute('disabled');

        createTaskButton.classList.remove('cursor-not-allowed', 'opacity-30');
        createTaskButton.classList.add('cursor-pointer');
        createTaskButton.removeAttribute('disabled');

        createStoryButton.classList.remove('cursor-not-allowed', 'opacity-30');
        createStoryButton.classList.add('cursor-pointer');
        createStoryButton.removeAttribute('disabled');

    } else {
        epicDetails.classList.add('hidden');

        epicRelatedTasks.classList.add('hidden');

        editEpicButton.classList.add('cursor-not-allowed', 'opacity-30');
        editEpicButton.setAttribute('disabled', true);

        createTaskButton.classList.add('cursor-not-allowed', 'opacity-30');
        createTaskButton.setAttribute('disabled', true);

        createStoryButton.classList.add('cursor-not-allowed', 'opacity-30');
        createStoryButton.setAttribute('disabled', true);
    }
});